關於AngularJS驗證表單功能的實作程式碼分析

這篇文章主要介紹了AngularJS表單驗證功能,結合具體實例形式分析了AngularJS表單驗證的操作步驟、實作技巧與相關注意事項,需要的朋友可以參考下

本文實例講述了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,&#39;pattern&#39;)">用户名必须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驗證表單功能的實作程式碼分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！