本文實(shí)例講述了AngularJS表單驗(yàn)證功能。分享給大家供大家參考，具體如下：

在AngularJS的管轄下，每個(gè)表單form都會創(chuàng)建一個(gè)ngFormController的一個(gè)實(shí)例。在表單里面的每個(gè)input都會創(chuàng)建一個(gè)在這個(gè)實(shí)例下的ngModelController實(shí)例，用以控制每個(gè)input的行為。

首先先從簡單的驗(yàn)證開始。

AngularJs的ngModelController提供了幾種屬性：$pristine;$dirty;$valid;$invalid;$error

pristine：表單并沒有改變。
dirty：表單改變了。
valid：全部控件符合驗(yàn)證規(guī)則。
invalid：至少有一個(gè)控件不符合驗(yàn)證規(guī)則。
error：有錯(cuò)，但是不知道什么錯(cuò)。

創(chuàng)建一個(gè)表單如下：

<form name="userForm" method="#" action="#">  <label for="name">用戶名1</label>  <input id="name" name="name" type="text" ng-model="users.name" pattern="^/w{6,18}$" required>  <span ng-show="userForm.name.$error.pattern">用戶名必須XXXX</span></form>

首先每個(gè)form都要有自己的name。通過這個(gè)name來對自己下面的input進(jìn)行控制。而后，每個(gè)input標(biāo)簽都要有自己的name。name是很關(guān)鍵的一步，被用于識別每個(gè)不同的input，從而識別不同的ngModelController。使用pattern來設(shè)置自己的正則表達(dá)式規(guī)則。使用$error來檢測這個(gè)正則表達(dá)式是否正確。并把它賦予給ng-show指令。如果有錯(cuò)，整個(gè)$error 就會返回true，顯示設(shè)置好的提示信息，一直到正則表達(dá)式通過，$error返回false，ng-show 對其進(jìn)行隱藏。

以上的簡單例子是沒有自己去重新設(shè)置控制器的行為，一切都是AngularJs默認(rèn)的。可以看到ng-show里面的判斷代碼其實(shí)是可以交給后面的JS完成的，這樣可以看到ngModelController的具體過程。

<!--html--><form name="userForm" ng-controller="main" method="#" action="#">  <label for="name">用戶名1</label>  <input id="name" name="name" type="text" ng-model="users.name" pattern="^/w{6,18}$" required>  <span style="color:red" ng-show="showError(userForm.name,'pattern')">用戶名必須XX</span>  <span style="color:green" ng-show="showSuccess(userForm.name)">成功！</span>  <!--對按鈕進(jìn)行動態(tài)鎖定-->  <button class="btn btn-primary btn-lg" ng-disabled="submit(userForm)">SAVE</button></form>

/*JS*/app.controller("main",function($scope){  $scope.showError=function(ngModelController,abc){    return ngModelController.$error[abc];  };  $scope.showSuccess=function(ngModelController){    return ngModelController.$valid; /*至少有1錯(cuò)誤，返回false，無錯(cuò)誤，返回true*/  };   $scope.submit=function(ngFormController){    return ngFormController.$invalid; /*valid的取反*/  };});