微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

AngularJS自定义表单验证功能实例详解

本文实例讲述了AngularJS自定义表单验证功能分享给大家供大家参考,具体如下:

Angular实现了大部分常用的HTML5的表单控件的类型(text,number,url,email,date,radio,checkBox),也实现了很多指令做为验证(required,pattern,minlength,maxlength,min,max)。

自定义的指令中,我们可以添加我们的验证方法到ngModelController的$validators对象上。为了取得这个controller对象,我们需要requirengModel指令。

在$validators对象上的每个方法都接收modelValue和viewValue两个值做为参数。在你绑定的验证方法返回一个值(true,false)之后,Angular会在内部调用$setValidity方法。验证会在每一次输入框的值改变($setViewValue被调用)或者模型的值改变。验证发生在$parsers和$formatters成功运行之后,验证不通过的项会做为ngModelController.$error的属性存储起来。

另外,在这个controller对象上,还有一个$asyncValidators对象,如果你的验证是异步的,则需要加验证附加在这个对象上,比如说用户注册时输入手机号,我们需要在后端验证该手机号是否已经注册,这个验证方法必须return一个promise对象,然后在验证通过时调用延迟对象的resolve,失败时调用reject,还未完成的异步的验证存储在ngModelController.$pending中。

例如(注意其中的user对象,只有验证通过了,才会将值绑定到模型上):

rush:xhtml;">
用户名(必须大于五位):
= 0) { d.reject(); } else { d.resolve(); } }); return d.promise; } } } }) .directive('username',ctrl) { ctrl.$validators.username = function (modelValue,viewValue) { if (modelValue) { return modelValue.length > 5 ? true : false; }; return false; } } } })

phone.json

rush:js;"> [ 13758262732,15658898520,13628389818,18976176895,13518077986 ]

效果

下面一个完整的用户注册的表单验证:

html:

rush:xhtml;">
用户名: required ng-pattern="/^[^#]*$/">
请注意! 用户名不能带#号。
required && register_form.username.$touched">

请注意!

用户名不能为空。
required ng-minlength="8" name="_password">
请注意! 密码长度不能少于八位。
required && register_form._password.$touched">

请注意!

密码不能为空。
请注意! 两次输入的密码不相同。
required && register_form.password.$touched">

请注意!

请再次输入密码。
disabled="register_form.phone.$invalid">发送验证码
请注意! 该手机号已注册过,可直接登录
required || register_form.phone.$error.minlength || register_form.phone.$error.maxlength)">

请注意!

请输入正确的手机号。

js:

= 0) { d.reject(); } else { d.resolve(); } }); return d.promise; } } } }) // 验证两次输入的密码是否相同的自定义验证 .directive('pwdRepeat',function () { return { require: 'ngModel',ctrl) { ctrl.$validators.pwdRepeat = function (modelValue) { // 当值为空时,通过验证,因为有required if (ctrl.$isEmpty(modelValue)) { return true; } return modelValue === scope.data._password ? true : false; } } } })

css:

rush:css;"> .form-group { position: relative; } .right { position: absolute; right: 10px; top: 34px; color: green; }

phone.json:

rush:js;"> [ 13758262732,13518077986 ]

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《》、《》及《

希望本文所述对大家AngularJS程序设计有所帮助。

原文地址:https://www.jb51.cc/js/30761.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐