本文實例講述了AngularJS表單驗證功能。分享給大家供大家參考，具體如下：
在AngularJS的管轄下，每個表單form都會創建一個ngFormController的一個實例。在表單里面的每個input都會創建一個在這個實例下的ngModelController實例，用以控制每個input的行為。
首先先從簡單的驗證開始。
AngularJs的ngModelController提供了幾種屬性：$pristine;$dirty;$valid;$invalid;$error
pristine：表單并沒有改變。dirty：表單改變了。valid：全部控件符合驗證規則。invalid：至少有一個控件不符合驗證規則。error：有錯，但是不知道什么錯。
創建一個表單如下：
<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>首先每個form都要有自己的name。通過這個name來對自己下面的input進行控制。而后，每個input標簽都要有自己的name。name是很關鍵的一步，被用于識別每個不同的input，從而識別不同的ngModelController。使用pattern來設置自己的正則表達式規則。使用$error來檢測這個正則表達式是否正確。并把它賦予給ng-show指令。如果有錯，整個$error 就會返回true，顯示設置好的提示信息，一直到正則表達式通過，$error返回false，ng-show 對其進行隱藏。
以上的簡單例子是沒有自己去重新設置控制器的行為，一切都是AngularJs默認的。可以看到ng-show里面的判斷代碼其實是可以交給后面的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> <!--對按鈕進行動態鎖定--> <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錯誤，返回false，無錯誤，返回true*/ }; $scope.submit=function(ngFormController){ return ngFormController.$invalid; /*valid的取反*/ };});這里直接在控制器里面的ngModelController里進行判斷。里面有一個坑，就是判斷$valid 等等這類屬性是沒有帶參數的。而判斷$error 則需要表明“判斷什么”，我傳了自己的一個正則表達式給他。
AngularJs還可以對表單的提交按鈕進行“鎖定”。但要注意的是，此時BUTTON對應的Controller不再是針對某一個input的ngModelController，而是針對整個form的ngFormController了，因此，里面的$invalid 是判斷所有的input有沒有問題，全部都沒問題的時候才會解鎖。
思考：正則表達式或者minlength類似這種限制，能否寫在JS文件里面。
更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答
