AngularJs的表單驗證

標籤：使用者   請求   htm   技術   選項   class   效果   ber   rect   

能夠根據使用者在表單中輸入的內容給出即時視覺反饋是非常重要的。在人與人溝通的語境
中，表單驗證給出來的反饋同獲得正確輸入同等重要。

如果想要屏蔽瀏覽器對錶單的預設驗證行為，可以在表單元素上添加novalidate標記。

<form name="form" novalidate>
<label name="email">Your email</label>
<input type="email"
name="email"
ng-model="email" placeholder="Email Address" />
</form>

下面看一下可以在input元素上使用的所有驗證選項。

1. 必填項
驗證某個表單輸入是否已填寫，只要在輸入欄位元素上添加HTML5標記required即可：
<input type="text" required />
2. 最小長度
驗證表單輸入的文本長度是否大於某個最小值，在輸入欄位上使用AngularJS指令ng-minleng=
"{number}"：
<input type="text" ng-minlength="5" />
3. 最大長度
驗證表單輸入的文本長度是否小於或等於某個最大值，在輸入欄位上使用AngularJS指令
ng-maxlength="{number}"：
<input type="text" ng-maxlength="20" />

4. 模式比對
使用ng-pattern="/PATTERN/"來確保輸入能夠匹配指定的Regex：
<input type="text" ng-pattern="[a-zA-Z]" />

5. 電子郵件
驗證輸入內容是否是電子郵件，只要像下面這樣將input的類型設定為email即可：
<input type="email" name="email" ng-model="user.email" />

6. 數字
驗證輸入內容是否是數字，將input的類型設定為number：

<input type="number" name="age" ng-model="user.age" />

7. URL
驗證輸入內容是否是URL，將input的類型設定為 url：
<input type="url" name="homepage" ng-model="user.facebook_url" />

8. 自訂驗證
在AngularJS中自訂指令是非常容易的。鑒於目前還沒有介紹到指令的相關內容，第10章
再深入研究如何建立自訂驗證。目前先來看一下如何通過向後端伺服器發送請求，並通過響應
的結果來將輸入欄位設定為合法或不合法，以確保輸入欄位中的內容是唯一的。

自訂指令：

<my-directive></my-directive>

myDirective指令的定義看起來是這樣的：
angular.module(‘myApp‘,[])
.directive(‘myDirective‘, function() {
return {
restrict: ‘E‘,
template: ‘<a href="http://google.com">
Click me to go to Google</a>‘
};
});

通過AngularJS模組API中的.directive()方法，我們可以通過傳入一個字串和一個函數來
註冊一個新指令。其中字串是這個指令的名字，指令名應該是駝峰命名風格的，函數應該返回
一個對象。

駝峰命名風格用來將一個短語寫在一個單詞中，除了第一個單詞外其他單詞首
字母大寫，中間不加空格。例如，bumpy roads用駝峰風格來寫應該是
bumpyRoads。
在我們的例子中，在HTML裡使用my-directive聲明指令，因此指令定義必須
以myDirective為名字。

directive()方法返回的對象中包含了用來定義和配置指令所需的方法和屬性。

預設情況下，AngularJS將模板產生的HTML代碼嵌套在自訂標籤<my-directive>內部。

下面向指令定義中添加一些新的設定：我們可以將自訂標籤從產生的DOM中完全移除掉，
並只留下由模版產生的連結。將replace設定為true就可以實現這個效果：
angular.module(‘myApp‘, [])
.directive(‘myDirective‘, function() {
return {
restrict: ‘E‘,
replace: true,
template: ‘<a href="http://google.com">Click me to go to Google</a>‘
};
});
再次看一下產生後的代碼，會發現DOM中原始的指令聲明已經不見了，只有我們在模板中
寫的HTML代碼。replace方法會用自訂元素取代指令聲明，而不是嵌套在其內部，8-5
所示。

從現在起，我們把建立的這些自訂元素稱作指令（用.directive()方法建立），因為事實
上聲明指令並不需要建立一個新的自訂元素。

下面都是用來聲明前面建立指令的合法格式：
<my-directive></my-directive>
<div my-directive></div>
<div class="my-directive"></div>
<!--directive:my-directive-->

為了讓AngularJS能夠調用我們的指令，需要修改指令定義中的restrict設定。這個設定告
訴AngularJS在編譯HTML時用哪種聲明格式來匹配指令定義。我們可以指定一個或多個格式。
例如，之前建立的指令中可以指定以元素（E）、屬性（A）、類（C）或注釋（M）的格式來
調用指令：

 

angular.module(‘myApp‘, [])
.directive(‘myDirective‘, function() {
return {
restrict: ‘EAC‘,
replace: true,
template: ‘<a href="http://google.com">Click me to go to Google</a>‘
};
});

無論有多少種方式可以聲明指令，我們堅持使用屬性方式，因為它有比較好的跨瀏覽器安全色性：
<div my-directive></div>
為了更加明確我們的意圖，將restrict設定為字母A（代表attribute）：
restrict: ‘A‘

遵循這個約定的同時，也要注意每個瀏覽器的內建樣式，以便決定指令模板在HTML中是嵌
套在聲明元素內，還是替換聲明元素。

如果不將URL和連結文本混在指令內部，可以為其他使用我們指令的人提供更好的體驗。我
們的目標是關注指令的公用介面，就像其他任何程式設計語言一樣。實際上，應該將上面的模板轉換
成可以接受兩個變數的形式：一個變數是URL，另一個是連結文本：
template: ‘<a href="{{ myUrl }}">{{ myLinkText }}</a>‘

在主HTML文檔中，可以給指令添加myUrl和myLinkText兩個屬性，這兩個參數會成為指令
內部範圍的屬性：
<div my-directive
my-url="http://google.com"
my-link-text="Click me to go to Google">
</div>

重新載入頁面，注意聲明指令的部分已經被模板代替，但是連結的href屬性是空的，並且尖
括弧內也沒有文本，

 

AngularJs的表單驗證