angular表單驗證

藉助AngularJS，咱們不須要花太多額外的精力就能夠輕鬆實現客戶端表單驗證功能。雖然 Web應用安全不能徹底依賴客戶端驗證，但客戶端驗證能夠提供表單狀態的實時反饋。
要使用表單驗證，首先要確保表單有一個name屬性。
全部輸入字段均可以進行基本的驗證，好比最大、最小長度等。這些功能是由新的HTML5 表單屬性提供的。
若是想要屏蔽瀏覽器對錶單的默認驗證行爲，能夠在表單元素上添加novalidate標記。
下面看一下能夠在input元素上使用的全部驗證選項。

1. 必填項
   驗證某個表單輸入是否已填寫，只要在輸入字段元素上添加HTML5標記required便可：

   <input type="text" required />

2. 最小長度
   驗證表單輸入的文本長度是否大於某個最小值，在輸入字段上使用AngularJS指令ng-minleng= "{number}"：

   <input type="text" ng-minlength="5" />

3. 最大長度
   驗證表單輸入的文本長度是否小於或等於某個最大值，在輸入字段上使用AngularJS指令 ng-maxlength="{number}"：

   <input type="text" ng-maxlength="20" />

4. 模式匹配
   使用ng-pattern="/PATTERN/"來確保輸入可以匹配指定的正則表達式：

   <input type="text" ng-pattern="[a-zA-Z]" />

5. 電子郵件
   驗證輸入內容是不是電子郵件，只要像下面這樣將input的類型設置爲email便可：

   <input type="email" name="email" ng-model="user.email" />

6. 數字
   驗證輸入內容是不是數字，將input的類型設置爲number：

   <input type="number" name="age" ng-model="user.age" />

7. URL
   驗證輸入內容是不是URL，將input的類型設置爲 url：

   <input type="url" name="homepage" ng-model="user.facebook_url" />

8. 在表單中控制變量
   表單的屬性能夠在其所屬的$scope對象中訪問到，而咱們又能夠訪問$scope對象，所以 JavaScript能夠間接地訪問DOM中的表單屬性。藉助這些屬性，咱們能夠對錶單作出實時（和 AngularJS中其餘東西同樣）響應。這些屬性包括下面這些。

   未修改的表單    formName.inputFieldName.$pristine   
      這是一個布爾屬性，用來判斷用戶是否修改了表單。若是未修改，值爲true，若是修改過值爲false；
       
      修改過的表單    formName.inputFieldName.$dirty
      只要用戶修改過表單，不管輸入是否經過驗證，該值都返回true：
       
      合法的表單     formName.inputFieldName.$valid
      這個布爾型的屬性用來判斷表單的內容是否合法。若是當前表單內容是合法的，下面屬性的 值就是true：
       
      不合法的表單    formName.inputFieldName.$invalid 
      這個布爾屬性用來判斷表單的內容是否不合法。若是當前表單內容是不合法的，下面屬性的 值爲true：
       
      錯誤   formName.inputfieldName.$error
      若是驗證失敗，這個屬性的值爲true；若是值爲false，說明輸入字段的值經過了驗證。

   下面結合具體的例子，來運用上面的屬性

<form novalidate="novalidate" name="myForm">
        <div>
            <label>用 戶 名：</label>
            <input type="text" 
                    name="user" 
                    placeholder="請輸入你的用戶名" 
                    ng-model="user"
                    ng-maxlength="10"
                    ng-minlength="5"
                    required 
            ></br>
        </div>
        <div class="check">
            <p class="error" ng-if="myForm.user.$error.required && myForm.user.$touched">用戶名不能爲空</p>
            <p class="error" ng-if="myForm.user.$error.maxlength || myForm.user.$error.minlength">    
                用戶名長度應該在5-10位之間
            </p>
        </div>
        <div>
            <label>密    碼：</label>
            <input type="password"
                     name="paw"
                      placeholder="******"
                       ng-model="paw"
                       ng-minlength="6"
                       ng-maxlength="10"
                       required 
             ></br>
        </div>
        <div class="check">
            <p class="error" ng-if="myForm.paw.$error.required && myForm.paw.$touched">
                密碼不能爲空
            </p>
            <p class="error" ng-if="myForm.paw.$error.maxlength || myForm.paw.$error.minlength">    
                密碼長度應該在6-10位之間
            </p>
        </div>
        <div>
            <label>重複密碼：</label>
            <input type="text"
                     name="repaw"
                     placeholder="******"
                       ng-model="repaw"
             ></br> 
        </div>
        <div class="check"> 
            <p class="error" ng-if="repaw!=paw && myForm.paw.$touched">
                兩次密碼輸入不一致
            </p>
        </div>
        <div>
            <label>郵&nbsp;箱：</label>
            <input type="mail"
                     name="mail"
                      placeholder=""
                       ng-model="mail"
                       ng-pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"
            ></br>
        </div>
        <div class="check">
            <p class="error" ng-if=" myForm.phone.$error.pattern && myForm.phone.$touched">
                郵箱格式錯誤
            </p>
        </div>
        <div>
            <label>手機號碼：</label>
            <input type="text"
                     name="phone"
                      placeholder="請輸入手機號碼"
                       ng-model="phone"
                       ng-pattern="/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/"
            ></br>
        </div>
        <div class="check">
            <p class="error" ng-if=" myForm.phone.$error.pattern && myForm.phone.$touched">
                手機號碼格式錯誤
            </p>
        </div>
        <input type="submit"
                 name="sub"
                  value="提交"
                  ng-submit="submit"
        >
    </form>