每天学习一点点，成功增加一大步

AngularJS 自带表单验证的使用

AngularJS zhanghui 1956℃

关于这块的信息之前在看 AngularJS 的相关教程时看到过，但当时没有去实践过，所以这两天我在做这块方面的实战时就遇到各种的坑，在网络上关于这块的资料也多，但都没有写那么细致，以致在练习过程中一直都不顺畅，费我不少的脑力去想各种问题的原因，不过这个过程还是值得，今天上午我就搞清这里面的用法。在此我做下记录。

Angular 的表单验证的实现过程基本上是围绕着其自带的 ng 指令来的，这和 JQUERY 有很大的不同，它会使你节约很多的 JS 检验代码也同样能实现相同的效果，但是这里的写法要留神，不然你会遇到不少的坑。

在说实现整个过程之前，首先要了解 Angular 常用的表单验证指令有哪些：

1. 必填项验证，某个表单控件输入是否已填写，只要在输入字段表单控件上添加HTML5标记required即可

 <input type="text" required />

2. 最小长度，验证表单控件输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= “{number}”

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

3. 最大长度，验证表单控件输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令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" />

整理完以上的验证指令之后，如何判断是否通过验证就有以下两组方式：
第1组、$valid 和 $invalid，布尔型属性，两者之间是成相反关系，它的作用是表单或控件是否通过验证。
如果 $valid 为 true：表明已经通过验证，而 $invalid 与之相反关系，因此 $invalid 为 false.

formName.inputFieldName.$valid
formName.inputFieldName.$invalid

第2组、$pristine 和 $dirty，布尔值属性，两者也是成相反关系，表示用户是否修改了表单。
如果 $pristine 为 ture：表示没有修改过，false：表示修改过

formName.inputFieldName.$pristine;
formName.inputFieldName.$dirty

另外 Angular 还为表单验证提供了一个友好的指令 ng-disabled ，这个指令是用来控制表单控件是否有用，当其为 true 时不可用，false 时为可用。

特别要注意的是：form 表单必须是要有表单名，表单控件也是要有 name 属性。最后给个范例。

 <form name="myForm" class="form-horizontal">
    <div class="row form-group">
        <label for="userName" class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="userName" ng-model="set.userName" id="userName" ng-minlength="6" ng-maxlength="18" required="required" />
            <label class="label label-info" ng-if="myForm.userName.$invalid">
                必填项，请在此输入长度为6~18位的字符
            </label>
            <span>
                pristine: {{myForm.userName.$pristine}}<br/>
                dirty: {{myForm.userName.$dirty}}<br/>
            </span>
        </div>
    </div>
    <div class="alert" ng-if="tips" style="background-color:#fa39c3;color:white" role="alert">
        <span>{{tips}}</span>
    </div>
    <button type="button" class="btn btn-primary" ng-click="ok();" ng-disabled="myForm.$invalid">Save changes</button>
</form>

angularJS 的表单验证上面也说了主要是以 NG 指令来实现，所以基本上用不到 js 部分，
所以 这里的 ok(); JS也是在通过验证后的最一个数据处理工具就不给代码了

转载请注明：隨習筆記 » AngularJS 自带表单验证的使用

喜欢 (0)