最近手上維護的組件剩下的BUG都是表單驗證，而且公司的表單驗證那塊代碼經歷的幾代人，里面的邏輯開始變得不清晰，而且代碼結構不是很angular。
是很有必要深入了解表單驗證。
入門之前，我覺得應該先了解angular內置的表單驗證有哪些:
1,必填項
驗證某個表單是否已經填寫，只要在元素上標記required即可:
<input type="text" required>
2,最小長度
驗證表單輸入框的內容是否大於某個最小值。
<input ng-minlength="5">
3,最大長度
驗證表單輸入框的內容是否小於某個最大值、
<input ng-maxlength="5">
4,匹配正則
確保輸入的內容匹配某個正則。
<input ng-pattern="[a-zA-Z]">
5,電子郵件
驗證內容是否是電子郵件。
<input type="email">
6，數字
驗證輸入內容是否是數字.
<input type="number">
7,URL
驗證輸入內容是否是URL。
<input type="url">
了解內置的表單驗證的很有必要的，可以避免重復開發。
接着就可以看看最簡單的表單驗證例子。
<body ng-controller="MainController"> <form name="form" novalidate="novalidate"> <input name="text" type="email" ng-model="name"> </form> </body>
ngModel是angular的黑魔法，實現雙向綁定，當name的值變化的時候，input的value也會跟着變化。
當用戶在input修改value的時候，name的值也會跟着變化。
novalidate="novalidate"的目的是去除系統自帶的表單驗證。
上面那段代碼解析完，angular會在MainController的$scope下面生成一個變量"form",$scope.form,這個變量的名稱跟html中form.name一致。
而$scope.form.text為文本輸入框的Model，繼承自ngModelController。
其中$scope.form實例自FormController。其內容為:
文本輸入框的Model(也就是$scope.form.text)為:
其中$dirty/$pristine,$valid/$invalid,$error為常用屬性。尤其是$error。
最簡單的表單驗證：
了解了form和輸入框，就可以先擼個最簡單的顯示錯誤的指令。
html內容如下:
<form name="form" novalidate="novalidate"> <input name="text" type="email" ng-model="name" error-tip> </form>
指令代碼如下:
// 當輸入框出錯，就顯示錯誤 directive("errorTip",function($compile){ return { restrict:"A", require:"ngModel", link:function($scope,$element,$attrs,$ngModel){ //創建子scope var subScope = $scope.$new(), //錯誤標簽的字符串,有錯誤的時候，顯示錯誤內容 tip = '<span ng-if="hasError()">{{errors() | json}}</span>'; //臟，而且無效，當然屬於錯誤了 $scope.hasError = function(){ return $ngModel.$invalid && $ngModel.$dirty; }
//放回ngModel的錯誤內容,其實就是一個對象{email:true,xxx:true,xxxx:trie} $scope.errors = function(){ return $ngModel.$error; } //編譯錯誤的指令，放到輸入框后面 $element.after($compile(tip)(subScope)); } } });
先看看執行結果:
輸入無效的郵箱地址的時候:
輸入正確的郵箱地址的時候:
errorTip指令一開始通過 require:"ngModel" 獲取ngModelController。然后創建用於顯示錯誤的元素到輸入框。
這里使用了$compile,$compile用於動態編譯顯示html內容的。具體原理可以看這里:http://www.cnblogs.com/accordion/p/5156553.html.
當有錯誤內容的時候，錯誤的元素就會顯示。
為什么subScope可以訪問hasError和errors方法？
因為原型鏈。看下圖就知道了。
自定義錯誤內容
好了，很明顯現在的表單驗證是不能投入使用的，我們必須自定義顯示的錯誤內容，而且要顯示的錯誤不僅僅只有一個。
顯示多個錯誤使用ng-repeat即可,也就是把"errorTip"指令中的
tip = '<span ng-if="hasError()">{{errors() | json}}</span>';
改成:
tip = '<ul ng-if="hasError()" ng-repeat="(errorKey,errorValue) in errors()">' + '<span ng-if="errorValue">{{errorKey | errorFilter}}</span>' + '</ul>';
其中errorFilter是一個過濾器，用於自定義顯示錯誤信息的。過濾器其實是個函數。
其代碼如下:
.filter("errorFilter",function(){
return function(input){
var errorMessagesMap = {
email:"請輸入正確的郵箱地址",
xxoo:"少兒不宜"
}
return errorMessagesMap[input];
}
});
結果如下：
好了，到這里就能夠處理“簡單”的表單驗證了。對，簡單的。我們還必須繼續深入。
自定義表單驗證！
那我們就來實現一個不能輸入“帥哥”的表單驗證吧。
指令如下:
.directive("doNotInputHandsomeBoy",function($compile){
return {
restrict:"A",
require:"ngModel",
link:function($scope,$element,$attrs,$ngModel){
$ngModel.$parsers.push(function(value){
if(value === "帥哥"){
//設置handsome為無效，設置它為無效之后，$error就會變成{handsome:true}
$ngModel.$setValidity("handsome",false);
}
return value;
})
}
}
})
結果如下：
這里有兩個關鍵的東西,$ngModel.$parsers和$ngModel.$setValidity.
$ngModel.$parsers是一個數組，當在輸入框輸入內容的時候，都會遍歷並執行$parsers里面的函數。
$ngModel.$setValidity("handsome",false);設置handsome為無效，會設置$ngModel.$error["handsome"] = true;
也會設置delete $ngModel.$$success["handsome"],具體可以翻翻源碼。
這里我總結一下流程。
-->用戶輸入
-->angular執行所有$parsers中的函數
-->遇到$setValidity("xxoo",false);那么就會把xxoo當做一個key設置到$ngModel.$error["xxoo"]
-->然后errorTip指令會ng-repeat $ngModel.$error
-->errorFilter會對錯誤信息轉義
-->最后顯示錯誤的信息
自定義輸入框的顯示內容
很多時候開發，不是簡簡單單驗證錯誤顯示錯誤那么簡單。有些時候我們要格式化輸入框的內容。
例如,"1000"顯示成"1,000"
"hello"顯示成"Hello"
現在讓我們實現自動首字母大寫。
源碼如下：
<form name="form" novalidate="novalidate"> <input name="text" type="text" ng-model="name" upper-case> </form>
.directive("upperCase",function(){
return {
restrict:"A",
require:"ngModel",
link:function($scope,$element,$attrs,$ngModel){
$ngModel.$parsers.push(function(value){
var viewValue;
if(angular.isUndefined(value)){
viewValue = "";
}else{
viewValue = "" + value;
}
viewValue = viewValue[0].toUpperCase() + viewValue.substring(1);
//設置界面內容
$ngModel.$setViewValue(viewValue);
//渲染到界面上，這個函數很重要
$ngModel.$render();
return value;
})
}
}
});
這里我們使用了$setViewValue和$render,$setViewValue設置viewValue為指定的值，$render把viewValue顯示到界面上。
很多人以為使用了$setViewValue就能更新界面了，沒有使用$render，最后不管怎么搞，界面都沒刷新。
如果只使用了$ngModel.$parsers是不夠的，$parsers只在用戶在輸入框輸入新內容的時候觸發，還有一種情況是需要重新刷新輸入框的內容的：
那就是雙向綁定，例如剛才的輸入框綁定的是MainController中的$scope.name,當用戶通過其他方式把$scope.name改成"hello"，輸入框中看不到首字母大寫。
這時候就要使用$formatters，還是先看個例子吧.
<body ng-controller="MainController"> <form name="form" novalidate="novalidate"> <button ng-click="random()">隨機</button> <input name="text" type="text" ng-model="name" upper-case> </form> </body>
MainController的內容:
angular.module("app", [])
.controller("MainController", function ($scope, $timeout) {
$scope.random = function(){
$scope.name = "hello" + Math.random();
}
})
夠簡單吧，點擊按鈕的時候，$scope.name變成hello開頭的隨機內容.
很明顯，hello的首字母沒大寫，不是我們想要的內容。
我們修改下指令的內容:
.directive("upperCase",function(){
return {
restrict:"A",
require:"ngModel",
link:function($scope,$element,$attrs,$ngModel){
$ngModel.$parsers.push(function(value){
var viewValue = upperCaseFirstWord(handleEmptyValue(value));
//設置界面內容
$ngModel.$setViewValue(viewValue);
//渲染到界面上，這個函數很重要
$ngModel.$render();
return value;
})
//當過外部設置modelValue的時候，會自動調用$formatters里面函數
$ngModel.$formatters.push(function(value){
return upperCaseFirstWord(handleEmptyValue(value));
})
//防止undefined，把所有的內容轉換成字符串
function handleEmptyValue(value){
return angular.isUndefined(value) ? "" : "" + value;
}
//首字母大寫
function upperCaseFirstWord(value){
return value.length > 0 ? value[0].toUpperCase() + value.substring(1) : "";
}
}
}
});
總結一下:
1.
-->用戶在輸入框輸入內容
-->angular遍歷$ngModel.$parsers里面的函數轉換輸入的內容，然后設置到$ngModel.$modelValue
-->在$ngModel.$parsers數組中的函數里，我們修改了$ngModel.$viewValue,然后$ngMode.$render()渲染內容。
2.
-->通過按鈕生成隨機的字符串設置到name
-->每次臟檢測都會判斷name的值是否跟$ngModel.$modelValue不一致（這里是使用$watch實現的），不一致就反序遍歷$formaters里面的所有函數並執行，把最終返回值賦值到$ngModel.$viewValue
-->刷新輸入框內容
“自定義輸入框的顯示內容”的例子能不能優化？
為什么要優化？
原因很簡單，為了實現“自定義內容”，使用了$parsers和$formatters,其實兩者的內容很像！這一點很關鍵。
怎么優化？
使用$ngModel.$validators。
好，現在把例子再改一下。
.directive("upperCase",function(){
return {
restrict:"A",
require:"ngModel",
link:function($scope,$element,$attrs,$ngModel){
//1.3才支持，不管手動輸入還是通過其他地方更新modelValue，都會執行這里
$ngModel.$validators.uppercase = function(modelValue,viewValue){
var viewValue = upperCaseFirstWord(handleEmptyValue(modelValue));
//設置界面內容
$ngModel.$setViewValue(viewValue);
//渲染到界面上，這個函數很重要
$ngModel.$render();
//返回true，表示驗證通過，在這里是沒啥意義
return true;
}
//防止undefined，把所有的內容轉換成字符串
function handleEmptyValue(value){
return angular.isUndefined(value) ? "" : "" + value;
}
//首字母大寫
function upperCaseFirstWord(value){
return value.length > 0 ? value[0].toUpperCase() + value.substring(1) : "";
}
}
}
})
代碼簡潔了很多，$ngModel.$validators在1.3以上的版本才支持。
$ngModel.$validators.uppercase函數的返回值如果是false，那么$ngModel.$error['uppercase']=true。這一點跟$ngModel.$setValidity("uppercase",false)差不多。
內容不完整的話，請拍磚，我繼續加。
晚點補上源碼剖析部分。