angularjs中的表單驗證

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/"來確保輸入能匹配指定的正則表達式

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

5.表單的屬性

      表單的屬性能夠在所在做用域的$scope對象中訪問到，而咱們又能夠訪問$scope對象由於JavaScript能夠間接地訪問dom中的表單屬性藉助這些屬性，咱們能夠對錶單作出實時的響應（雙向綁定）這些屬性

1:未修改的表單
這是一個布爾類型的屬性，用來判斷用戶是否修改了表單，若是未修改，值爲true不然爲false
formName.inputfieldName.$pristine
2:修改過的表單
只要用戶修改過表單不管輸入是否驗證經過都返回true
formName.inputfieldName.$dirty
3:合法的表單
這個布爾屬性用來判斷表單的內容是否不合法，若是當前的表單內容是合法的。該屬性就返回爲true
formName.inputfieldName.$valid
4：不合法的表單
這個布爾屬性用來判斷表單的內容是否不合法，若是當前的表單內容是不合法的，該屬性就返回爲true
formName.inputfieldName.$invalid
5：錯誤
這是angular提交的另外一個很是有用的屬性：$error對象，她包含當前表單全部的驗證內容。以及它們是否合法的信息，能夠這樣來訪問formName.inputfieldName.$error,若是驗證失敗這個屬性值爲true，若是值爲false說明經過了驗證。