AngularJs的表單驗證

可以根據用戶在表單中輸入的內容給出實時視覺反饋是很是重要的。在人與人溝通的語境
中，表單驗證給出來的反饋同得到正確輸入同等重要。

若是想要屏蔽瀏覽器對錶單的默認驗證行爲，能夠在表單元素上添加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/"來確保輸入可以匹配指定的正則表達式：
<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屬性是空的，而且尖
括號內也沒有文本，