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说明经过了验证。