AngularJS自定义表单验证

发布时间：2020-12-17 08:23:52 所属栏目：安全来源：网络整理

导读：点击打开链接 Angular实现了大部分常用的HTML5的表单控件的类型(text,number,url,email,date,radio,checkbox)，也实现了很多指令做为验证(required,pattern,minlength,maxlength,min,max)。在自定义的指令中，我们可以添加我们的验证方法到 ngModelControll

点击打开链接

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对象，只有验证通过了，才会将值绑定到模型上):

[html] 
    view plain 
    copy 
    
 <formname="register_form"ng-submit="save()">
 divclass="form-group">
labelfor="phoneNumber"手机号(不能重复):
</labelinputtype="text"class="form-control"ng-model="user.phoneNumber"id="phoneNumber"name="phoneNumber"requiredphonediv"username"用户名(必须大于五位):
"user.username"id="username"requiredusernamebuttonclass="btnbtn-blockbtn-primary"type="submit">提交buttonformh3>用户对象pre{{user|json}}
>

[javascript] 
    copy

'usestrict'

;

angular.module('app',[])
.directive('phone',function($q,$http){
return{
require:'ngModel',
link:function(scope,ele,attrs,ctrl){
ctrl.$asyncValidators.phone=function(modelValue,viewValue){
vard=$q.defer();
$http.get('phone.json')
.success(function(phoneList){
if(phoneList.indexOf(parseInt(modelValue))>=0){
d.reject();
}else{
d.resolve();
}
});
returnd.promise;
}
})
'username',0); background-color:inherit">ctrl.$validators.username=if(modelValue){
returnmodelValue.length>5?true:false;
};
return})

phone.json

copy

[

13758262732,
15658898520,
13628389818,0); background-color:inherit">18976176895,0); background-color:inherit">13518077986
]

效果

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

html:

copy

novalidate

用户名:

"text"id="username"ng-model="user.username"class="form-control"name="username"requiredng-pattern="/^[^#]*$/"spanclass="glyphiconglyphicon-okright"ng-show="register_form.username.$valid">span"alertalert-danger"ng-show="register_form.username.$error.pattern"strong>请注意！用户名不能带#号。
"register_form.username.$error.required&&register_form.username.$touched"用户名不能为空。
"_password">密码:
"password"id="_password"ng-model="data._password"class="form-control"requiredng-minlength="8"name="register_form._password.$valid""register_form._password.$error.minlength&&register_form._password.$touched"密码长度不能少于八位。
"register_form._password.$error.required&&register_form._password.$touched"密码不能为空。
"password">确认密码:"password"ng-model="user.password"class="password"requiredpwd-repeat"register_form.password.$valid""register_form.password.$error.pwdRepeat&&register_form.password.$touched"两次输入的密码不相同。
"register_form.password.$error.required&&register_form.password.$touched"请再次输入密码。
"phone">手机号:"row""col-sm-10""num"id="phone"ng-model="user.phone"name="phone"class="11"ng-maxlength="11"phone"col-sm-2""btnbtn-default"type="button"ng-disabled="register_form.phone.$invalid">发送验证码"register_form.phone.$valid""register_form.phone.$error.phone"该手机号已注册过，可直接登录。
"register_form.phone.$touched&&!register_form.phone.$error.phone&&(register_form.phone.$error.required||register_form.phone.$error.minlength||register_form.phone.$error.maxlength)"请输入正确的手机号。
"code">验证码:"code"ng-model="user.code"class="code"required"register_form.code.$valid"
"submit"ng-disabled="register_form.$invalid"ng-click=>

js:

copy

'myCtrl'

,153); font-size:14px; word-wrap:normal; border:none; background-color:inherit">function

($scope){

$scope.data={};
$scope.save=function(){
alert('保存成功！')
//判断手机号是否重复
return{
vard=$q.defer();
'phone.json')
function(phoneList){
if(phoneList.indexOf(parseInt(modelValue))>=0){
d.reject();
else{
d.resolve();
});
returnd.promise;
})
//验证两次输入的密码是否相同的自定义验证
'pwdRepeat',153); font-size:14px; word-wrap:normal; border:none; background-color:inherit">function(){
ctrl.$validators.pwdRepeat=function(modelValue){
//当值为空时，通过验证，因为有required
if(ctrl.$isEmpty(modelValue)){
true;
returnmodelValue===scope.data._password?})

css:

[css] 
    copy

.form-group{

position:relative;
.right{
position:absolute;
right:10px;
top:34px;
color:green;
}

phone.json:

copy

]

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!