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

前端之家收集整理的这篇文章主要介绍了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对象,只有验证通过了,才会将值绑定到模型上):

用户名(必须大于五位):
= 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

效果

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

html:

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

请注意!

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

请注意!

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

请注意!

请再次输入密码。
请注意! 该手机号已注册过,可直接登录
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:

phone.json:

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

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

原文链接:https://www.f2er.com/js/30761.html

猜你在找的JavaScript相关文章