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