表單驗證在很多地方都會用到，在學習angular之前，我覺得表單驗證是一個很麻煩的事情，需要在js中寫大量的代碼，但是在angular中，只需要寫很少的代碼就能完成以前需要很多代碼才能完成的東西。
在angular中，當我們在input標簽中加入ng-model之后，angular會為這個標簽自動生成一系列的class。例如：
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script> angular.module("myApp",[]).controller("confirmation",function($scope){ }); </script> </head> <body> <form ng-controller="confirmation"> <input type="text" ng-model="username" /> </form> </body> </html>
然后在頁面加載完成時，我們來審查元素
可以很明顯的看到這個標簽多了兩個類名：ng-pristine,ng-valid。
那么這兩個類名有什么用呢，第一個ng-pristine是用來監聽這個標簽是否是原始的標簽，意思就是，這個輸入框還沒有輸入過值，當輸入任意值后這個類名就會變成ng-dirty，然后，我們驗證表單用到的其實是第二個：ng-valid這個是angular提供的用於表單驗證的類名,ng-valid表示通過驗證，ng-invalid表示不通過。我們先來看看下面的一段代碼，還是剛剛那段，只是在input中加上了驗證條件：
<form ng-controller="confirmation"> <input type="text" ng-model="username" required ng-pattern="/^\w{6,20}$/"/> </form>
其中required是html5提供的表示輸入框不能為空，ng-pattern是用來寫正則表達式的，然后我們再來看看審查元素的結果
可以看見類名又多了兩個ng-invalid-required和ng-valid-pattern。
相信都清楚了這兩個類名的作用了吧，一個用來驗證輸入框的required驗證，一個用於表單中正則表達式的驗證。
其中ng-valid-?和ng-invalid-?分別表示通過?處的驗證和不通過，然后ng-valid表示通過這個輸入框的所有驗證，ng-invalid表示沒有全部通過。
知道這些之后，表單驗證就顯得很簡單了，比如我們想在驗證通過時在輸入框后面給用戶一個提示就可以這樣寫：
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script> angular.module("myApp",[]).controller("confirmation",function($scope){ }); </script> <style> span{ display: none; } .ng-valid+span{ display: inline; color: green; } </style> </head> <body> <form ng-controller="confirmation"> <input type="text" ng-model="username" required ng-pattern="/^\w{6,20}$/"/> <span>驗證通過</span> </form> </body> </html>
如果有錯誤或者不足，還望各位大神指點。
