angularjs中的表單驗證

標籤：類型   disabled   keyword   home   name   通過   invalid   htm   false   

angular對html原生的form做了封裝，增加了很多驗證功能

1.代碼結構

<form name="signup_form" novalidate ng-submit="signupForm()">        <div>            <label>使用者名稱</label>            <input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required />            <div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid">                <small ng-show="signup_form.name.$error.required">姓名必填</small>                <small ng-show="signup_form.name.$error.minlength">姓名最少三個字元</small>                <small ng-show="signup_form.name.$error.maxlength">姓名最多20個字元</small>            </div>        </div>        <div>            <label>密碼</label>            <input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required />            <div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid">                <small ng-show="signup_form.name.$error.required">密碼必填</small>                <small ng-show="signup_form.name.$error.minlength">密碼最少三個字元</small>                <small ng-show="signup_form.name.$error.maxlength">密碼最多20個字元</small>            </div>        </div>        <button type="submit" ng-disabled="signup_form.$invalid" class="button radius">提交</button>    </form>

2.如果要使用angular的表單驗證，首先要確保表單必須要有一個name的屬性所有的輸入欄位都可以進行基本驗證，比如最大，最小長度等。這些功能都由H5的表單屬性提供，如果想要屏蔽瀏覽器對於表單預設的驗證行為，可以在表單上添加novaildate的標記。

3.h5的驗證

    必填項：驗證表單輸入是否已經添加 之前在dom元素上加上required標記即可

<input type="text" required/>

    最大/小長度：驗證表單輸入的文本是否小/大於某個最小值，可以在輸入的欄位上使用指令 ng-maxlength="{number}"/ng-minlength="{number}"

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

   電子郵件:驗證輸入的文本是否是電子郵箱可以使用 type=email來實現

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

    是否數字:驗證輸入的文本是否是為數字可以使用 type=number來實現

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

    URL:驗證輸入的文本是否是為url可以使用 type=url來實現

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

4.angular內建的驗證指令

  匹配模式：使用ng-pattern="/PATTERN/"來確保輸入能匹配指定的Regex

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

5.表單的屬性

      表單的屬性可以在所在範圍的$scope對象中訪問到，而我們又可以訪問$scope對象因為JavaScript可以間接地訪問dom中的表單屬性藉助這些屬性，我們可以對錶單做出即時的響應（雙向繫結）這些屬性

1:未修改的表單這是一個布爾類型的屬性，用來判斷使用者是否修改了表單，如果未修改，值為true否則為falseformName.inputfieldName.$pristine2:修改過的表單只要使用者修改過表單無論輸入是否驗證通過都返回trueformName.inputfieldName.$dirty3:合法的表單這個布爾屬性用來判斷表單的內容是否不合法，如果當前的表單內容是合法的。該屬性就返回為trueformName.inputfieldName.$valid4：不合法的表單這個布爾屬性用來判斷表單的內容是否不合法，如果當前的表單內容是不合法的，該屬性就返回為trueformName.inputfieldName.$invalid5：錯誤這是angular提交的另一個非常有用的屬性：$error對象，她包含當前表單所有的驗證內容。以及它們是否合法的資訊，可以這樣來訪問formName.inputfieldName.$error,如果驗證失敗這個屬性值為true，如果值為false說明通過了驗證。

 

angularjs中的表單驗證