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

AngularJS 自带表单验证的使用

AngularJS zhanghui 818℃

关于这块的信息之前在看 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 自带表单验证的使用