摘要：表單和其中的表單控件提供了驗(yàn)證服務(wù)，可以讓用戶在提交一般在點(diǎn)擊類型為的按鈕時(shí)提交表單前意識(shí)到自己有非法不符合要求，以下都將稱為非法的輸入。為了編寫一個(gè)可靠的應(yīng)用程序，服務(wù)端驗(yàn)證是不可或缺的。促發(fā)條件至于自定義表單驗(yàn)證，我會(huì)另寫一篇。

網(wǎng)頁(yè)中用戶于服務(wù)端交互數(shù)據(jù)的表單控件有input、select、textarea，而表單是將為了達(dá)到一個(gè)目的（登錄、注冊(cè)等）各種控件整合到一起的一個(gè)集合。
表單和其中的表單控件提供了驗(yàn)證服務(wù)，可以讓用戶在提交（一般在點(diǎn)擊類型為submit的按鈕時(shí)提交）表單前意識(shí)到自己有非法（不符合要求，以下都將稱為非法）的輸入。這種驗(yàn)證方式（客戶端驗(yàn)證）提供了比多帶帶的服務(wù)端驗(yàn)證更好的用戶體驗(yàn)，因?yàn)橛脩粼谳斎牒蟮玫綄?shí)時(shí)的反饋，修正輸入的信息。
但是雖然說客戶端驗(yàn)證提供了更好的用戶體驗(yàn)，但是服務(wù)端驗(yàn)證也是不可或缺的，因?yàn)榭蛻舳蓑?yàn)證并不可靠而且很容易被繞過。為了編寫一個(gè)可靠的應(yīng)用程序，服務(wù)端驗(yàn)證是不可或缺的。

用于理解雙向數(shù)據(jù)綁定的關(guān)鍵指令是ngModel（指令在視圖中使用時(shí)需要將大寫字母裝換為-x，例如ng-model），ngModel（ngBind）指令提供了模型與視圖之間的雙向數(shù)據(jù)綁定的方法。另外，ngModel為其他指令擴(kuò)展其行為提供了API（應(yīng)用程序編程接口）。

  
    
  
        
  
            姓名：  
              
        
  
        
  
            郵箱：  
              
        
  
        
  
            性別：  
              
                 男  
              
              
                 女  
              
        
  
        
  
            保存  
            重置  
        
  
    
  
    
  
        user:{{ user | json }}  
    
  
    
  
        User:{{ User | json }}  
    
  
      
 

這里有幾個(gè)需要注意的點(diǎn)：

novalidate是用來(lái)禁用瀏覽器自帶的驗(yàn)證。

ngModel的值不會(huì)被設(shè)置，直到通過了控件的驗(yàn)證，比如說type=email必須為xxx@xxx的形式，可以仔細(xì)看下方user中email字段的變化。

建議不要使用type=reset的按鈕，會(huì)將輸入框清空，但不會(huì)重置數(shù)據(jù)模型中的值，原因未知。

在不同的驗(yàn)證狀態(tài)下，ngModel為控件和表單提供了一些css類（需要在樣式表中聲明）：

ng-valid:數(shù)據(jù)模型合法

ng-invalid:數(shù)據(jù)模型不合法

ng-valid-[key]:每一個(gè)通過$setValidity添加的合法鍵

ng-invalid-[key]:每一個(gè)通過$setValidity添加的不合法的鍵

ng-pristine:還沒有與用戶交互（輸入過）的控件

ng-dirty:與用戶交互過的控件

ng-touched:失去過焦點(diǎn)的控件（鼠標(biāo)點(diǎn)上去獲得，點(diǎn)其他地方失去）

ng-untouched:沒有失去過焦點(diǎn)的控件

ng-pending:任何沒有結(jié)束（與服務(wù)端交互）的異步驗(yàn)證

這里簡(jiǎn)單的演示ng-invalid和ng-touched
html:

    
    
    
        姓名：    
            
    
    
    
    
        郵箱：    
            
    
    
    
    
        性別：    
            
             男    
            
            
             女    
          
    
    
    
    
        保存    
    
  
  

css:

.ng-invalid.form-control {  
border-color: #E96666;  
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(233, 102, 102, 0.6)  
}  
.ng-touched.form-control {  
border-color: #66E985;  
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 233, 160, 0.6)  
}  

第一個(gè)輸入框因?yàn)槭潜仨毜?所以是非法的狀態(tài),所以angular會(huì)給這個(gè)控件添加ng-invalid樣式,在輸入后變?yōu)楹戏?該樣式去除,在失去焦點(diǎn)后ng-touched樣式添加

表單是FormController的一個(gè)實(shí)例，我們可以用表單的name屬性將表單暴露到作用域中。
相似的，一個(gè)有數(shù)據(jù)綁定(有ngModel)的表單控件也是NgModelController的實(shí)例，也可以通過表單實(shí)例的屬性(控件的name)暴露到作用域中。
我們可以通過這個(gè)特性擴(kuò)展我們上一個(gè)例子:

在用戶與表單控件交互后再展示錯(cuò)誤信息

在用戶點(diǎn)擊提交之后再展示錯(cuò)誤信息

  
    
  
        姓名:  
          
    
  
    
  
        注意！  
        姓名不能為空  
    
  
    
  
        email:  
          
    
  
    
  
        性別:  
          
              
                 男  
              
              
                 女  
              
          
    
  
    提交  
  

注意一下，$submitted表示是否點(diǎn)擊過提交(type=submit)按鈕,開發(fā)遇到問題的時(shí)候，大家也可以把$error打印出來(lái)看下，表單和表單中的控件都有$error對(duì)象，這里我都打印出來(lái)了

在默認(rèn)情況下，對(duì)數(shù)據(jù)的任何改變都會(huì)促發(fā)模板的更新和表單驗(yàn)證。我們可以使用ngModelOptions指令去重寫這個(gè)行為，使只有在特定的條件下才觸發(fā)。
比如說

ng-model-options="{ updateOn: "blur" }"  

會(huì)只在表單控件失去焦點(diǎn)時(shí)觸發(fā)，我們也可以設(shè)置多個(gè)事件來(lái)觸發(fā)，只要使用空格隔開即可

ng-model-options="{ updateOn: "mousedown blur" }"  

如果想把原有的保存，只是想加一個(gè)觸發(fā)條件的話，可以加上default在列表中

ng-model-options="{ updateOn: "default blur" }"  

一個(gè)完整點(diǎn)的例子:
html:

  
    
  
        
促發(fā)條件: blur
  
          
        {{ user.name }}  
    
  
    
  
        
正常
  
          
        {{ user.phone }}  
    
  
  

我們可以通過ngModelOptions的debounce 關(guān)鍵字來(lái)使數(shù)據(jù)綁定延遲，這個(gè)延遲對(duì)解析器，驗(yàn)證和表單的屬性($dirty,$pristine等)都會(huì)生效。
寫法也很簡(jiǎn)單

ng-model-options="{ debounce: 500 }"  

ngModelOptions是可以繼承的，所以如果有多個(gè)控件都需要這個(gè)效果，可以在他們的父元素上添加這個(gè)指令，除非子元素重寫這個(gè)屬性。

  
    
促發(fā)條件: blur
  
      
    {{ user.name }}  
  

至于自定義表單驗(yàn)證，我會(huì)另寫一篇。剛開博客沒多久，希望大家有任何問題或者意見都在下方提出，或者加我qq 651882883。