AngularJS入門基礎——表單驗證

標籤：

<form name="form" novalidata>

  <label name="email">your email</label>   <input type="email" name="email" ng-model="email" placeholder="Email Address"> </form> /*如下是朋友空間的內容*/ angular 進階校正特性

    在一些情況下,單獨的表單驗證並不能滿足需要,可能有一些特殊的校正,比如關聯兩個資料等等.通常這類校正都是可複用的,也就是需要一個directive.編寫的自訂校正的 directive 並不複雜,首先需要瞭解幾個 Angular 提供的屬性和介面.

    1. $setValidity()

    這個方法可以人為的設定一個表單控制項的$valid 以及$ invalid, 也就是說改變表單控制項是否通過校正的狀態.類似的還有$setDirty()和$setPristine().

?

1	ngModel.$setValidity(‘max-custom‘, true);    // 類似這樣的設定就將一個表單控制項的狀態改變了, ngModel 是 directive 的 link 的第四個參數,$setValidity 的第一個參數可以定義一個標誌,第二個參數true 表示通過驗證, false 表示未通過

    2. $parsers

    這個屬性解釋起來稍微有點抽象,當 ngModel 的值發生變化的時候,Angular 會自己調用 $setViewValue(value),然後 ngModel 的 $parsers 數組中得函數會被逐個調用,當 $parsers[0] 中的方法被調用後執行結果會傳遞給 $parsers[1],以此類推,這些函數可以對 ngModel 的值進行轉換或者通過 $setValidity() 設定表單的合法性.

    所以如果我們想實現點什麼特殊的校正,可以在 $parsers 中插入一個 function, 然後它會在驗證鏈結中被調用,如果不希望資料模型發生更新,讓 $parsers 的函數傳回值返回 undefined 即可.

?

12345678910111213141516171819

.directive(‘maxMax‘, function(){  return {    require: ‘ngModel‘,    restrict: ‘A‘,    link: function($scope, iElm, iAttrs, ngModel) {      if(!ngModel) return;      ngModel.$parsers.unshift(function(viewValue){        var num = parseInt(viewValue);        if(num>=0 && num<99){          ngModel.$setValidity(‘maxMax‘,true);          return viewValue;        }else{          ngModel.$setValidity(‘maxMax‘,false);          return undefined;        }      });    }  };})

  

紅色字型部分經過我的實踐及探索，發現有誤，正確的應該如下：

所以如果我們想實現點什麼特殊的校正,可以在 $parsers 中插入一個 function, 然後它會在驗證鏈結中被調用,如果不希望資料模型發生更新,讓 $parsers 的函數傳回值返回 原值 即可. 

12345678910111213141516171819

.directive(‘maxMax‘, function(){  return {    require: ‘ngModel‘,    restrict: ‘A‘,    link: function($scope, iElm, iAttrs, ngModel) {      if(!ngModel) return;      ngModel.$parsers.unshift(function(viewValue){        var num = parseInt(viewValue);        if(num>=0 && num<99){          ngModel.$setValidity(‘maxMax‘,true);          return viewValue;        }else{          ngModel.$setValidity(‘maxMax‘,false);          return viewValue; // 這裡如果返回 undefined 則會導致部分ng內建驗證器失效，因為擷取不到ngModel.$viewValue的值了。        }      });    }  };})

 

AngularJS入門基礎——表單驗證