前端之家收集整理的这篇文章主要介绍了
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;
}
}
}
})
用户名:
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)">
请注意!
请输入正确的手机号。