走進AngularJs(九)表單及表單驗證

　年底了越來越懶散，AngularJs的學習落了一段時間，部落格最近也沒更新。慚愧~前段時間有試了一下用yeoman構建Angular項目，感覺學的差不多了想做個項目練練手，誰知遇到了一系列問題。yeoman是基於node.js的一套工具包，由於我一直在windows下編程，而且node.js對於windows環境的支援也在慢慢加強，所以想嘗試在windows下用yeoman跟搭建一個項目。過程遠比想象的坎坷多了，各種報錯，各種搜資料解決問題，最終還是無法解決一些編譯出錯，以失敗告終，轉戰Linux。在此也提醒大家如果想在windows下使用yeoman，還是謹慎為好！ 　　今天來學習一下一直被我忽視掉的表單驗證。ng的強項是開發CRUD應用，也就是與使用者操作多、互動比較頻繁的應用。表單是與使用者互動的一個重要角色，所以萬萬不能忽視。在學習之後發現這部分知識不僅僅是想象中的那麼簡單，比起其他特性，我們一直不怎麼重視的表單驗證，其實也可以做的很簡單，而且易維護。下面就開始吧~ ng中的表單與Controller　　看這個小標題也行你會差異，表單驗證，怎麼跟controller扯上關係了。ng中的form已經不同於我們平時用的form標籤，做了增強。form是FormController的一個執行個體。如何理解這句話呢？想想我們使用ng-controller指令的情景： 複製代碼<div ng-controller="testC">  <input type="test" ng-model="a" /></div> <scritp>function testC($scope){  //.............}</script>複製代碼　　應用了ng-controller的div就是testC的一個執行個體，我們可以在模板中使用定義在$scopt上的任何屬性和方法，而testC的定義也是由我們自己實現的。當我們使用<form>的時候也是這樣的道理，FormController由ng為我們定義好了，有一系列屬性和方法提供給我們完成驗證工作，form執行個體通過name屬性來進行標識，我們可以通過此標識來訪問form執行個體的屬性和方法，如： <form name="myform">{{myform.$valid}}</form>　　form提供的屬性都是用來表示表單的驗證狀態的，包括：$pristine(表單沒有填寫記錄)、$dirty(表單有填寫記錄)、$valid(通過驗證)、$invalid(未通過驗證)、$error(驗證錯誤資訊)。除$error外，前四個的值為true或false表示相應的狀態。$error的值為一個js對象，包含了以下驗證內容的狀態： emailmaxmaxlengthminminlengthnumberpatternrequiredurl　　這些內容我們會在稍後的例子中看到。FormController還提供了一些方法，我們一般不手工調用它們，都是系統自己調用。  　　表單元素，如input、checkbox、radio等也不是普通的表單元素了，它們通通是NgModelController的執行個體。與form一樣，也是通過name屬性來標識。FormController擁有的那五個屬性，NgModelController也同樣擁有，除此之外，還有許多額外的屬性和方法，我們稍後也在樣本中展示，可參考官方文檔： 　　還有一個特性需要瞭解，一個表單中的表單元素，會作為這個form的屬性自動加在上面，通過name標識就可以訪問到，如： <form name="myform">  <input type="text" name="myname" />  {{myform.myname.$valid}}</form>ng內建的驗證規則 　　ng架構提供了非常方便的驗證機制，你只需要在標籤上加點指令，像使用HTML5提供的驗證那樣，然後在css中根據規則定義好正確/錯誤的樣式就OK了，例如我們要讓一個文字框為必填項，使用required： <form name="myform novalidate>  <input type="text" ng-model="a" required /></form>　　有幾點需要注意： 在<form>上加了一個novalidate，用來禁止掉瀏覽器預設的驗證行為，因為ng已經對HTML5的幾種表單新特性做了相容處理。表單元素必須有ng-model，否則無法觸發驗證在css中分別定義.ng-pristine、.ng-valid、.ng-invalid、.ng-dirty這四種樣式，ng會根據相應的狀態自動加上樣式。　　這部分還是相當簡單的，下面我們寫例子來測一下這幾種驗證機制，HTML代碼如下： 複製代碼<div ng-app="MyApp"><div ng-controller="testC">  <form name="myform" novalidate>    required: <input type="text" name="test1" ng-model="test1" required><br />    ng-minlength(3): <input type="text" name="test2" ng-model="test2" ng-minlength="3"><br />    ng-maxlength(10): <input type="text" name="test3" ng-model="test3" ng-maxlength="10"><br />    ng-pattern(/[a-f]/): <input type="text" name="test4" ng-model="test4" ng-pattern="/[a-f]/"><br />    type="number"(2-8): <input type="number" name="test5" max="8" min="2" ng-model="test5"><br />    type="url": <input type="url" name="test6" ng-model="test6"><br />    type="email": <input type="email" name="test7" ng-model="test7"><br />  </form>  <div>    <h2>表單驗證結果：</h2>    myform.$invalid : {{myform.$invalid}}<br />    myform.$valid : {{myform.$valid}}<br />    myform.$pristine : {{myform.$pristine}}<br />    myform.$dirty : {{myform.$dirty}}<br />    myform.$error : {{myform.$error}}<br />    <h2>表單項驗證結果</h2>    required:<br />    myform.test1.$invalid : {{myform.test1.$invalid}}<br />    myform.test1.$valid : {{myform.test1.$valid}}<br />    myform.test1.$pristine : {{myform.test1.$pristine}}<br />    myform.test1.$dirty : {{myform.test1.$dirty}}<br />    myform.test1.$error : {{myform.test1.$error}}<br />    myform.test2.$error : {{myform.test2.$error}}<br />  </div></div></div>複製代碼　　CSS代碼，為不同的狀態設定不同的背景色： 複製代碼input.ng-pristine {    background-color: white;}input.ng-dirty {    background-color: lightyellow;}input.ng-valid {    background-color: lightgreen;}input.ng-invalid {    background-color: pink;}複製代碼　　js代碼，進行controller的初始化： 複製代碼var app = angular.module('MyApp',[]);app.controller('testC',function($scope){  $scope.test1='';  $scope.test2='';  $scope.test3='';  $scope.test4='';  $scope.test5='';  $scope.test6='';  $scope.test7='';});