AngularJS自定义表单验证函数示例详细说明

时间：2021-08-30 来源：互联网编辑：宝哥软件园浏览：次

本文说明了AngularJS自定义表单的验证功能。分享给大家参考，如下：

Angular实现了最常用的HTML5表单控件类型(文本、数字、URL、电子邮件、日期、单选、复选框)，还实现了许多验证指令(必需、模式、最小长度、最大长度、最小、最大)。

在自定义指令中，我们可以将我们的验证方法添加到ngModelController的$validators对象中。要获得这个控制器对象，我们需要requirengModel指令。

$validators对象上的每个方法都接收两个值，即模型值和视图值作为参数。在绑定的验证方法返回一个值(真、假)后，Angular将在内部调用$ setvalidation方法。每次验证都会改变输入框的值($setViewValue被调用)或模型的值。验证发生在$ parsers和$ formatters成功运行之后。未通过验证的项目存储为ngModelController的属性。$错误。

此外，在这个控制器对象上还有一个$asyncValidators对象。如果您的验证是异步的，您需要向该对象添加验证。比如用户注册时输入手机号，我们需要在后端验证手机号是否已经注册。该验证方法必须返回一个promise对象。然后，当验证通过时，调用延迟对象的解析，当它失败时，调用拒绝，未完成的异步验证存储在ngModelController中。$待定。

例如，(注意用户对象，只有通过验证，值才会绑定到模型):

form name=' register _ form ' ng-submit=' save()' Div class=' form-group '标签为=' phonenumber '移动电话号码(不能重复):/标签输入类型='text' class='form-control ' ng-model=' user . phone number ' id=' phone number ' name=' phone number '必填电话/Div class=' form-group '标签为=' username '用户名(必须大于五位数字):/标签输入类型=' text ' class=' form 'angular.module('app '，[])。指令(' phone '，函数($q，$ http){ return { require : ' ng model '，link: function (scope，ele，attrs，ctrl) { ctrl。$ async validators . phone=function(model value，viewValue){ var d=$ q . delay()；$http.get('phone.json ')。success(function(phone list){ if(phone list . indexof(parsent(model value))=0){ d . reject()；} else { d . resolve()；} });返回d.promise} } }}).指令(' username '，函数($q，$ http){ return { require : ' ng model '，link: function (scope，ele，attrs，ctrl) { ctrl。$ validators . username=function(model value，view value){ if(model value){ return model value . length 5？真：假；};返回false} } }})phone.json

[13758262732, 15658898520, 13628389818, 18976176895, 13518077986]

以下是完整的用户登记表验证：

html:

表单名称=' register _ form ' novalidate div class=' form-group '标签为='用户名'用户名：/标签！-ng-pattern='/pattern/'确保输入项符合正则-输入类型=' text ' id=' username ' ng-model=' user。username ' class=' form-control ' name=' username '必需ng-pattern='/^[^#]*$/' span='水纹-ok right ' ng-show=' register _ form。用户名。$ valid '/span/div class=' alert alert-danger ' ng-show=' register _ form。用户名。$错误。模式'强'请注意！/strong用户名不能带#号/div class=' alert alert-danger ' ng-show=' register _ form。用户名。$错误。必需的register _ form。用户名。$ touch ' strong请注意！/strong用户名不能为空/div div class='form-group '标签用于=' _密码'密码：/标签！- ng-minlength='num '让密码不能小于最小长度-输入类型=' password ' id=' _ password ' ng-model='数据_password' class='form-control '必需ng-min length=' 8 ' name=' _ password ' span class=' glyphicon glyphicon-ok right ' ng-show=' register _ form ._密码$ valid '/span/div class=' alert alert-danger ' ng-show=' register _ form ._密码$error.minlength register_form ._密码$ touched ' strong请注意！/strong密码长度不能少于八位/div class=' alert alert-danger ' ng-show=' register _ form ._密码$error.required register_form ._密码$ touched ' strong请注意！/strong密码不能为空/div div class='form-group '标签表示='密码'确认密码：/标签输入类型=' password ' id=' password ' ng-model=' user。password ' class=' form-control ' name=' password ' required pwd-repeat span class=' glyphicon glyphicon-ok right ' ng-show=' register _ form。密码。$ valid '/span/div class=' alert alert-dance ' ng-show=' register _ form。密码。$错误。pwdrepete注册表。密码。$ touch ' strong请注意！/strong两次输入的密码不相同/div class=' alert alert-danger ' ng-show=' register _ form。密码。$错误。必需的register _ form。密码。$ touch ' strong请注意！/strong请再次输入密码/div div class='form-group '标签用于='电话'手机号：/标签div class=' row ' div class=' col-sm-10 '输入类型=' num ' id=' phone ' ng-model=' user。phone ' name=' phone ' class=' form-control '必需ng-min length=' 11 ' ng-maxlength=' 11 ' phone/div class=' col-sm-2 ' button class=' BTN BTN-默认' type=' button ' ng-disabled=' register _ form。电话。“$ invalid”发送验证码/button/div/div span class=' glyphicon glyphicon-ok right ' ng-show=' register _ form。电话。$ valid '/span/div span class=' alert alert-dance ' ng-show=' register _ form。电话。$错误。电话'强请注意！/strong该手机号已注册过，可直接登录/div class=' alert alert-danger ' ng-show=' register _ form。电话。$已触摸！注册表单。电话。$错误。电话(登记表。电话。$错误。必需| | register _ form。电话。$错误。最小长度| |寄存器_表单。电话。$错误。maxlength)' strong请注意！/strong请输入正确的手机号"="代码的"/div div class="表单组"标签验证码：/标签输入类型=' text ' id=' code ' ng-model=' user。code ' class=' form-control ' name=' code '必填span class=' glyphicon glyphicon-ok right ' ng-show=' register _ form。代码。$ valid '/span/div！-在表单不合法时禁用提交按钮-button class=' BTN BTN-街区BTN-小学' type=' submit ' ng-disabled=' register _ form .$invalid' ng-click='save()'提交/button/formjs:

使用"严格";angular.module('app '，[]).控制器(“我的Ctrl”，函数($ scope){ $ scope。数据={ }；$scope.save=function () { alert('保存成功!') }})//判断手机号是否重复。指令('电话'，函数($q，$ http){ return { require : ' ng model '，link: function (scope，ele，attrs，ctrl) { ctrl .$ async验证器。phone=function(model value，viewValue){ var d=$ q . delay()；$http.get('phone.json ').成功(功能(电话列表){ if(电话列表。indexof(parsent(模型值))=0){ d . reject()；} else { d . resolve()；} });返回d.promise} } }})//验证两次输入的密码是否相同的自定义验证。指令(' pwdRepeat '，function(){ return { require : ' ng model '，link: function (scope，ele，attrs，ctrl) { ctrl .$验证器。pwdrepeat=函数(模型值){//当值为空时，通过验证，因为有如果需要(ctrl .$ isEmpty(model value)){ 0返回真}返回模型值===范围。数据。_密码？真：假；} } }})css:表单组{位置：相对；}.右侧{位置：绝对；right: 10pxtop: 34px颜色：绿色；}电话。js :

[ 13758262732、15658898520、13628389818、18976176895、13518077986]