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

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

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

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

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

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

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

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

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

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

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

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

ng-invalid-[key]:每一個通過$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)證

這里簡單的演示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)  
}  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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