当前位置:小鱼儿玄机二站 > 关于计算机 > AngularJs表单验证实例详解,详解AngularJS达成表单

AngularJs表单验证实例详解,详解AngularJS达成表单

文章作者:关于计算机 上传时间:2019-09-03

发端学习AngularJS表单验证:

常用的表单验证指令

常用的表单验证指令
**
1. 必填项验证
**

1. 必填项验证

有些表单输入是不是已填写,只要在输入字段元素上增添HTML5标识required就可以:

有些表单输入是还是不是已填写,只要在输入字段成分上加多HTML5标志required就能够:

复制代码 代码如下:

复制代码 代码如下:

<<input type="text" required />  

<input type="text" required />

2. 微细长度

2. 纤维长度

表明表单输入的文书长度是或不是超过有个别最小值,在输入字段上使用指令ng-minleng= "{number}":

表明表单输入的文本长度是或不是超越某些最小值,在输入字段上行使指令ng-minleng= "{number}":

复制代码 代码如下:

复制代码 代码如下:

<<input type="text" ng-minlength="5" />

<input type="text" ng-minlength="5" />

3. 最大尺寸

3. 最大尺寸

注明表单输入的文本长度是还是不是低于或等于有些最大值,在输入字段上选择指令ng-maxlength="{number}":

表明表单输入的公文长度是或不是低于或等于有些最大值,在输入字段上利用指令ng-maxlength="{number}":

复制代码 代码如下:

复制代码 代码如下:

<<input type="text" ng-maxlength="20" />

<input type="text" ng-maxlength="20" />

4. 格局相配

4. 情势相称

动用ng-pattern="/PATTE福特ExplorerN/"来担保输入能够包容钦定的正则表明式:

利用ng-pattern="/PATTELacrosseN/"来确认保障输入能够包容钦点的正则表达式:

复制代码 代码如下:

复制代码 代码如下:

<<input type="text" ng-pattern="/[a-zA-Z]/" /> 

<input type="text" ng-pattern="/[a-zA-Z]/" />

5. 电子邮件

5. 电子邮件

注明输入内容是或不是是电子邮件,只要像上边那样将input的品类设置为email就能够:

证实输入内容是不是是电子邮件,只要像上面那样将input的品种设置为email就能够:

复制代码 代码如下:

复制代码 代码如下:

<input type="email" name="email" ng-model="user.email" />

<input type="email" name="email" ng-model="user.email" />

6. 数字

6. 数字

表明输入内容是不是是数字,将input的门类设置为number:

注解输入内容是不是是数字,将input的花色设置为number:

复制代码 代码如下:

复制代码 代码如下:

<<input type="number" name="age" ng-model="user.age" /> 

<input type="number" name="age" ng-model="user.age" />

7. URL

7. URL

 验证输入内容是或不是是U揽胜极光L,将input的门类设置为 url:

注明输入内容是或不是是U智跑L,将input的花色设置为 url:

复制代码 代码如下:

复制代码 代码如下:

<<input type="url" name="homepage" ng-model="user.facebook_url" /> 

<input type="url" name="homepage" ng-model="user.facebook_url" />

上边大家将那几个表单验证放到具体的落成中来测验一下:

下边大家将那么些表单验证放到具体的达成中来测量检验一下:

<div class="col-md-6">
 <form role="form" class="form-horizontal">
  <div class="form-group">
  <div class="col-md-4">
   <label for="name">1.必填项</label>
  </div>
  <div class="col-md-8">
   <input class="form-control" id="name" type="text" required ng-model='user.name' />
  </div>
  </div>
  <div class="form-group">
  <div class="col-md-4">
   <label for="minlength">2.最小长度=5</label>
  </div>
  <div class="col-md-8">
   <input type="text" id="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" />
  </div>
  </div>
  <div class="form-group">
  <div class="col-md-4">
   <label for="minlength">3.最大长度=20</label>
          </div>
  <div class="col-md-8">
   <input type="text" ng-model="user.maxlength" ng-maxlength="20" class="form-control" />
  </div>
  </div>
  <div class="form-group">
  <div class="col-md-4">
   <label for="minlength">4. 模式匹配</label>
  </div>
  <div class="col-md-8">
   <input type="text" id="minlength" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*d$/" class="form-control" />
  </div>
  </div>
  <div class="form-group">
  <div class="col-md-4">
   <label for="email">5. 电子邮件</label>
          </div>
  <div class="col-md-8">
   <input type="email" id="email" name="email" ng-model="user.email" class="form-control" />
  </div>
  </div>
  <div class="form-group">
  <div class="col-md-4">
   <label for="age">6. 数字</label>
          </div>
  <div class="col-md-8">
   <input type="number" id="age" name="age" ng-model="user.age" class="form-control" />
  </div>
  </div>
  <div class="form-group">
  <div class="col-md-4">
   <label for="url"> 7. URL</label>
          </div>
  <div class="col-md-8">
   <input type="url" id="url" name="homepage" ng-model="user.url" class="form-control" />
  </div>
  </div>
  <div class="form-group text-center">
  <input class="btn btn-primary btn-lg" type="submit" value="提交" />
  </div>
 </form> 
 </div>
 <div class="col-md-12">
 1.必填项:{{user.name}}<br>
 2.最小长度=5:{{user.minlength}}<br>
 3.最大长度=20:{{user.maxlength}}<br>
 4.模式匹配:{{user.pattern}}<br>
 5.电子邮件:{{user.email}}<br>
 6.数字:{{user.age}}<br>
 7.URL:{{user.url}}<br>
 </div>
<div class="col-md-6">
  <form role="form" class="form-horizontal">
   <div class="form-group">
    <div class="col-md-4">
     <label for="name">1.必填项</label>
    </div>
    <div class="col-md-8">
     <input class="form-control" id="name" type="text" required ng-model='user.name' />
    </div>
   </div>
   <div class="form-group">
    <div class="col-md-4">
     <label for="minlength">2.最小长度=5</label>
    </div>
    <div class="col-md-8">
     <input type="text" id="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" />
    </div>
   </div>
   <div class="form-group">
    <div class="col-md-4">
     <label for="minlength">3.最大长度=20</label>
          </div>
    <div class="col-md-8">
     <input type="text" ng-model="user.maxlength" ng-maxlength="20" class="form-control" />
    </div>
   </div>
   <div class="form-group">
    <div class="col-md-4">
     <label for="minlength">4. 模式匹配</label>
    </div>
    <div class="col-md-8">
     <input type="text" id="minlength" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*d$/" class="form-control" />
    </div>
   </div>
   <div class="form-group">
    <div class="col-md-4">
     <label for="email">5. 电子邮件</label>
          </div>
    <div class="col-md-8">
     <input type="email" id="email" name="email" ng-model="user.email" class="form-control" />
    </div>
   </div>
   <div class="form-group">
    <div class="col-md-4">
     <label for="age">6. 数字</label>
          </div>
    <div class="col-md-8">
     <input type="number" id="age" name="age" ng-model="user.age" class="form-control" />
    </div>
   </div>
   <div class="form-group">
    <div class="col-md-4">
     <label for="url"> 7. URL</label>
          </div>
    <div class="col-md-8">
     <input type="url" id="url" name="homepage" ng-model="user.url" class="form-control" />
    </div>
   </div>
   <div class="form-group text-center">
    <input class="btn btn-primary btn-lg" type="submit" value="提交" />
   </div>
  </form>  
 </div>
 <div class="col-md-12">
  1.必填项:{{user.name}}<br>
  2.最小长度=5:{{user.minlength}}<br>
  3.最大长度=20:{{user.maxlength}}<br>
  4.模式匹配:{{user.pattern}}<br>
  5.电子邮件:{{user.email}}<br>
  6.数字:{{user.age}}<br>
  7.URL:{{user.url}}<br>
 </div>

在测量检验中大家开掘,独有当表明式满足验证,才会实时进展双向绑定。同有的时候间我们也发觉,效果图如下:

在测验中我们开掘,独有当表明式满意验证,才会实时进展双向绑定。同期大家也发觉,效果图如下:

图片 1

图片 2

如同并不曾发生怎么着难题,可是假诺大家将其移植到多个队HTML5表明不怎么好的浏览器再来测验一下【本例IE9】,难题来了,某个字段完全没得验证

犹如并未爆发什么难点,但是借使大家将其移植到贰个队HTML5证实不怎么好的浏览器再来测量试验一下【本例IE9】,难点来了,某个字段完全没得验证

图片 3

图片 4

实则,上边的事例,大家选拔了HTML5的验证与ng自有的验证进行了咬合,不援助HTML5注解,但ng自由验证运营非凡。设计方案很不难,能够行使方式相配的艺术消除这两种情况,也足以自定义表达指令来复写大概重定义验证法规。

实际上,上边的例证,大家选择了HTML5的辨证与ng自有的辨证举行了咬合,不帮忙HTML5证实,但ng自由验证运维卓越。施工方案比非常粗大略,能够使用方式相配的艺术搞定这两种情景,也得以自定义表明指令来复写也许重定义验证准绳。

屏蔽浏览器对表单的暗中同意验证行为 在表单成分上丰裕novalidate标记就能够,难题是我们怎么精通我们的表单有啥字段是卓有功用的,那么些事违法可能无效的?ng对此也提供了要命棒的施工方案,表单的品质能够在其所属的$scope对象中做客到,而小编辈又有什么不可访谈$scope对象,由此JavaScript可以直接地访谈DOM中的表单属性。借助这个属性,我们得以对表单做出实时响应。

屏蔽浏览器对表单的暗中同意验证行为

能够采用formName.inputFieldName.property的格式访谈那么些属性。

在表单成分上加上novalidate标志即可,难点是我们怎么精晓大家的表单有哪些字段是卓有成效的,那些事违规可能无效的?ng对此也提供了老大棒的实施方案,表单的性质能够在其所属的$scope对象中做客到,而作者辈又能够访谈$scope对象,因而JavaScript能够直接地访谈DOM中的表单属性。借助这个属性,我们得以对表单做出实时响应。

未修改过的表单

可以利用formName.inputFieldName.property的格式访谈这个属性。

布尔值属性,表示客商是不是修改了表单。若是为ture,表示从没改换过;false表示修改过formName.inputFieldName.$pristine;

未修改过的表单

修改的表单

布尔值属性,表示客户是或不是修改了表单。如若为ture,表示从没改动过;false表示修改过:

布尔型属性,当且仅当客商实际已经修改的表单。不管表单是或不是因此验证:formName.input菲尔德Name.$dirty 

复制代码 代码如下:

通过证实的表单

formName.inputFieldName.$pristine;

布尔型属性,它提醒表单是不是通过认证。如若表单当前由此验证,他将为true:formName.inputFieldName.$valid

修改的表单

未通过验证的表单:formName.inputFieldName.$invalid 

布尔型属性,当且仅当客商实际已经修改的表单。不管表单是还是不是通过验证:

末尾三个属性在用来DOM成分的突显或隐敝时是特意实用的。同有时候,倘使要设置一定的class时,他们也格外的实惠的。

复制代码 代码如下:

错误
那是AngularJS提供的另外三个丰硕管用的品质:$error对象。它蕴涵当前表单的保有验证内容,以及它们是或不是合法的音信。用上面包车型客车语法访问这几个特性

formName.inputFieldName.$dirty

formName.inputfieldName.$error
一旦证实失利,这本特性的值为true;借使值为false,表达输入字段的值通过了表明。

因此认证的表单

上面我们对这一个验证指令实行测验:

布尔型属性,它提醒表单是不是因此认证。若是表单当前透过验证,他将为true:

<!DOCTYPE html>

<html ng-app="myTest">
 <head>
 <meta name="viewport" content="width=device-width" />
 <title>Index</title>
 <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
 <script src="~/Javascript/angular.min.js"> </script>
 <style type="text/css">
  body { padding-top: 30px; }
 </style>
 </head>
 <body ng-Controller="MyController">
 <div class="col-md-6">
  <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid)" class="form-horizontal" novalidate>
  <div class="form-group has-feedback">
   <div class="col-md-4">
   <label for="name">1.必填项</label>
   </div>
   <div class="col-md-8">
   <input class="form-control" id="name" name="name" type="text" required ng-model='user.name' />

   </div>
  </div>
  <div class="form-group has-feedback">
   <div class="col-md-4">
   <label for="minlength">2.最小长度=5</label>
   </div>
   <div class="col-md-8">
   <input type="text" id="minlength" name="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" />

   </div>
  </div>
  <div class="form-group has-feedback">
   <div class="col-md-4">
   <label for="maxlength">3.最大长度=20</label>
   </div>
   <div class="col-md-8">
   <input type="text" id="maxlength" name="maxlength" ng-model="user.maxlength" ng-maxlength="20" class="form-control" />

   </div>
  </div>
  <div class="form-group has-feedback">
   <div class="col-md-4">
   <label for="pattern">4. 模式匹配</label>
   </div>
   <div class="col-md-8">
   <input type="text" id="pattern" name="pattern" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*d$/" class="form-control" />

   </div>
  </div>
  <div class="form-group has-feedback">
   <div class="col-md-4">
   <label for="email">5. 电子邮件</label>
   </div>
   <div class="col-md-8">
   <input type="email" id="email" name="email" ng-model="user.email" class="form-control" />

   </div>
  </div>
  <div class="form-group has-feedback">
   <div class="col-md-4">
   <label for="age">6. 数字</label>
   </div>
   <div class="col-md-8">
   <input type="number" id="age" name="age" ng-model="user.age" class="form-control" />


   </div>
  </div>
  <div class="form-group has-feedback">
   <div class="col-md-4">
   <label for="url"> 7. URL</label>
   </div>
   <div class="col-md-8">
   <input type="url" id="url" name="url" ng-model="user.url" class="form-control" />

   </div>
  </div>
  <div class="form-group text-center">
   <input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid" type="submit" value="提交" />
  </div>
  </form> 
 </div>
 <div class="col-md-12">
  1.必填项:{{user.name}}  
  $pristine 【没修改】:{{myForm.name.$pristine }}  
  $dirty【修改过】:{{myForm.name.$dirty}}  
  $invalid【验证失败】:{{myForm.name.$invalid}}  
  $invalid【验证成功】:{{myForm.name.$valid}}  
  required:{{myForm.name.$error.required}}  
  <br>
  2.最小长度=5:{{user.minlength}}
  $pristine 【没修改】:{{myForm.minlength.$pristine }}  
  $dirty【修改过】:{{myForm.minlength.$dirty}}  
  $invalid【验证失败】:{{myForm.minlength.$invalid}}  
  $invalid【验证成功】:{{myForm.minlength.$valid}}  
  $error【错误详情】:{{myForm.minlength.$error}}  <br>
  3.最大长度=20:{{user.maxlength}}
  $pristine 【没修改】:{{myForm.maxlength.$pristine }}  
  $dirty【修改过】:{{myForm.maxlength.$dirty}}  
  $invalid【验证失败】:{{myForm.maxlength.$invalid}}  
  $invalid【验证成功】:{{myForm.maxlength.$valid}}  
  $error【错误详情】:{{myForm.maxlength.$error}}  <br>
  4.模式匹配:{{user.pattern}}
  $pristine 【没修改】:{{myForm.pattern.$pristine }}  
  $dirty【修改过】:{{myForm.pattern.$dirty}}  
  $invalid【验证失败】:{{myForm.pattern.$invalid}}  
  $invalid【验证成功】:{{myForm.pattern.$valid}}  
  $error【错误详情】:{{myForm.pattern.$error}}  <br>
  5.电子邮件:{{user.email}}
  $pristine 【没修改】:{{myForm.email.$pristine }}  
  $dirty【修改过】:{{myForm.email.$dirty}}  
  $invalid【验证失败】:{{myForm.email.$invalid}}  
  $invalid【验证成功】:{{myForm.email.$valid}}  
  $error【错误详情】:{{myForm.email.$error}}  <br>
  6.数字:{{user.age}}
  $pristine 【没修改】:{{myForm.age.$pristine }}  
  $dirty【修改过】:{{myForm.age.$dirty}}  
  $invalid【验证失败】:{{myForm.age.$invalid}}  
  $invalid【验证成功】:{{myForm.age.$valid}}  
  $error【错误详情】:{{myForm.age.$error}}  <br>
  7.URL:{{user.url}}
  $pristine 【没修改】:{{myForm.url.$pristine }}  
  $dirty【修改过】:{{myForm.url.$dirty}}  
  $invalid【验证失败】:{{myForm.url.$invalid}}  
  $invalid【验证成功】:{{myForm.url.$valid}}  
  $error【错误详情】:{{myForm.url.$error}}  <br>
 </div>
 </body>
</html>
<script type="text/javascript">
 angular.module('myTest', [])
 .controller('myController', function($scope) {
  $scope.submitForm = function(isValid) {
  if (!isValid) {
   alert('验证失败');
  }
  };
 }
 );
</script>

复制代码 代码如下:

效果如下:

formName.inputFieldName.$valid

图片 5

未通过验证的表单

同不经常间,ng针对那三种评释指令,针对性的安装了有个别css样式

复制代码 代码如下:

它们包涵:

formName.inputFieldName.$invalid

.ng-valid  { }
.ng-invalid { }
.ng-pristine { }
.ng-dirty  { }
/* really specific css rules applied by angular */
.ng-invalid-required  { }
.ng-invalid-minlength  { }
.ng-valid-max-length  { }

最后四个属性在用来DOM成分的显得或遮掩时是特别实用的。同不经常候,倘使要安装一定的class时,他们也不行有效的。

它们对应着表单输入字段的一定情景。
例如说当有个别字段中的输入违法时,.ng-invlid类会被增多到那些字段上。 你能够编写本身喜爱的CSS . 你能够私有定制化这几个类来促成特定的风貌应用.

错误

可是,私下认可的证实指令不必然能够,完全满意大家的真正应用场景,ng同样提供的自定义验证指令的效果与利益。

那是AngularJS提供的其他三个不行实用的品质:$error对象。它蕴含当前表单的具有验证内容,以及它们是或不是合法的音信。用上边包车型大巴语法访谈那天个性

第一大家来看一个粗略的例证:

复制代码 代码如下:

angular.module("myTest", [])
 .directive('multipleEmail', [function () {
 return {
  require: "ngModel",
  link: function (scope, element, attr, ngModel) {
  if (ngModel) {
   var emailsRegexp = /^([a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+(.[a-z0-9-]+)*[;;]?)+$/i;
  }
  var customValidator = function (value) {
   var validity = ngModel.$isEmpty(value) || emailsRegexp.test(value);
   ngModel.$setValidity("multipleEmail", validity);
   return validity ? value : undefined;
  };
  ngModel.$formatters.push(customValidator);
  ngModel.$parsers.push(customValidator);
  }
 };
 }])

formName.inputfieldName.$error

页面Html部分代码如下:

只要证实失利,那性格子的值为true;假诺值为false,表明输入字段的值通过了表达。

 <form class="form-horizontal" role="form" id="custom_form" name="custom_form" novalidate>
  <div class="form-group">
  <label class="col-sm-2 control-label">多个email</label>

  <div class="col-sm-10">
   <input multiple-email name="user_email" ng-model="user.email" required class="form-control" placeholder="自定义验证,多个邮箱地址,以“;”或者“;”分割" />
   验证通过:{{custom_form.user_email.$valid}}
  </div>
  </div>
  <div class="form-group text-center">
  <input class="btn btn-primary btn-lg" ng-disabled="custom_form.$invalid" type="submit" value="提交" />
  </div>
 </form>

上面大家对这几个注明指令举办测验:

代码特别的简练,达成的效用如下所示:

<!DOCTYPE html>
<html ng-app="myTest">
 <head>
  <meta name="viewport" content="width=device-width" />
  <title>Index</title>
  <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
  <script src="~/Javascript/angular.min.js"> </script>
  <style type="text/css">
   body { padding-top: 30px; }
  </style>
 </head>
 <body ng-Controller="MyController">
  <div class="col-md-6">
   <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid)" class="form-horizontal" novalidate>
    <div class="form-group has-feedback">
     <div class="col-md-4">
      <label for="name">1.必填项</label>
     </div>
     <div class="col-md-8">
      <input class="form-control" id="name" name="name" type="text" required ng-model='user.name' />

     </div>
    </div>
    <div class="form-group has-feedback">
     <div class="col-md-4">
      <label for="minlength">2.最小长度=5</label>
     </div>
     <div class="col-md-8">
      <input type="text" id="minlength" name="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" />

     </div>
    </div>
    <div class="form-group has-feedback">
     <div class="col-md-4">
      <label for="maxlength">3.最大长度=20</label>
     </div>
     <div class="col-md-8">
      <input type="text" id="maxlength" name="maxlength" ng-model="user.maxlength" ng-maxlength="20" class="form-control" />

     </div>
    </div>
    <div class="form-group has-feedback">
     <div class="col-md-4">
      <label for="pattern">4. 模式匹配</label>
     </div>
     <div class="col-md-8">
      <input type="text" id="pattern" name="pattern" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*d$/" class="form-control" />

     </div>
    </div>
    <div class="form-group has-feedback">
     <div class="col-md-4">
      <label for="email">5. 电子邮件</label>
     </div>
     <div class="col-md-8">
      <input type="email" id="email" name="email" ng-model="user.email" class="form-control" />

     </div>
    </div>
    <div class="form-group has-feedback">
     <div class="col-md-4">
      <label for="age">6. 数字</label>
     </div>
     <div class="col-md-8">
      <input type="number" id="age" name="age" ng-model="user.age" class="form-control" />

     </div>
    </div>
    <div class="form-group has-feedback">
     <div class="col-md-4">
      <label for="url"> 7. URL</label>
     </div>
     <div class="col-md-8">
      <input type="url" id="url" name="url" ng-model="user.url" class="form-control" />

     </div>
    </div>
    <div class="form-group text-center">
     <input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid" type="submit" value="提交" />
    </div>
   </form>  
  </div>
  <div class="col-md-12">
   1.必填项:{{user.name}}  
   $pristine 【没修改】:{{myForm.name.$pristine }}  
   $dirty【修改过】:{{myForm.name.$dirty}}  
   $invalid【验证失败】:{{myForm.name.$invalid}}  
   $invalid【验证成功】:{{myForm.name.$valid}}  
   required:{{myForm.name.$error.required}}  
   <br>
   2.最小长度=5:{{user.minlength}}
   $pristine 【没修改】:{{myForm.minlength.$pristine }}  
   $dirty【修改过】:{{myForm.minlength.$dirty}}  
   $invalid【验证失败】:{{myForm.minlength.$invalid}}  
   $invalid【验证成功】:{{myForm.minlength.$valid}}  
   $error【错误详情】:{{myForm.minlength.$error}}  <br>
   3.最大长度=20:{{user.maxlength}}
   $pristine 【没修改】:{{myForm.maxlength.$pristine }}  
   $dirty【修改过】:{{myForm.maxlength.$dirty}}  
   $invalid【验证失败】:{{myForm.maxlength.$invalid}}  
   $invalid【验证成功】:{{myForm.maxlength.$valid}}  
   $error【错误详情】:{{myForm.maxlength.$error}}  <br>
   4.模式匹配:{{user.pattern}}
   $pristine 【没修改】:{{myForm.pattern.$pristine }}  
   $dirty【修改过】:{{myForm.pattern.$dirty}}  
   $invalid【验证失败】:{{myForm.pattern.$invalid}}  
   $invalid【验证成功】:{{myForm.pattern.$valid}}  
   $error【错误详情】:{{myForm.pattern.$error}}  <br>
   5.电子邮件:{{user.email}}
   $pristine 【没修改】:{{myForm.email.$pristine }}  
   $dirty【修改过】:{{myForm.email.$dirty}}  
   $invalid【验证失败】:{{myForm.email.$invalid}}  
   $invalid【验证成功】:{{myForm.email.$valid}}  
   $error【错误详情】:{{myForm.email.$error}}  <br>
   6.数字:{{user.age}}
   $pristine 【没修改】:{{myForm.age.$pristine }}  
   $dirty【修改过】:{{myForm.age.$dirty}}  
   $invalid【验证失败】:{{myForm.age.$invalid}}  
   $invalid【验证成功】:{{myForm.age.$valid}}  
   $error【错误详情】:{{myForm.age.$error}}  <br>
   7.URL:{{user.url}}
   $pristine 【没修改】:{{myForm.url.$pristine }}  
   $dirty【修改过】:{{myForm.url.$dirty}}  
   $invalid【验证失败】:{{myForm.url.$invalid}}  
   $invalid【验证成功】:{{myForm.url.$valid}}  
   $error【错误详情】:{{myForm.url.$error}}  <br>
  </div>
 </body>
</html>
<script type="text/javascript">
 angular.module('myTest', [])
  .controller('myController', function($scope) {
   $scope.submitForm = function(isValid) {
    if (!isValid) {
     alert('验证失败');
    }
   };
  }
  );
</script>

图片 6

成效如下:

这段代码很粗大略,不过涉及到了ngModelController的多少个重视的质量
$viewValue

图片 7

$viewValue本性保存着立异视图所需的实际上字符串。

何况,ng针对那二种注脚指令,针对性的装置了有些css样式

$modelValue

它们包涵:

$modelValue由数据模型持有。$modelValue和$viewValue恐怕是差别的,取决于$parser流水生产线是或不是对其展开了操作。

复制代码 代码如下:

$parsers

.ng-valid { }.ng-invalid { }.ng-pristine { }.ng-dirty { }/* really specific css rules applied by angular */.ng-invalid-required { }.ng-invalid-minlength { }.ng-valid-max-length { }

$parsers的值是贰个由函数组成的数组,当顾客同调节器举办交互,况且ngModelController中的$setViewValue()方法被调用时,在那之中的函数在当客商同调整器进行相互,并且ngModelController中的$setViewValue()方法被调会以流水线的款型被逐条调用。ngModel从DOM中读取的值会被传播$parsers中的函数,并相继被内部的剖判器处理。那是为了对值举办管理和修饰。

它们对应着表单输入字段的特定情景。

备注:ngModel.$setViewValue()函数用于安装成效域中的视图值。

举个例子当某些字段中的输入违法时,.ng-invlid类会被加多到那么些字段上。你能够编写本人心爱的CSS . 你可以私有定制化这一个类来达成特定的风貌应用.

ngModel.$set ViewValue()函数基本上能用二个参数。

而是,默许的验证指令不必然能够,完全满意大家的实在应用场景,ng同样提供的自定义验证指令的效果与利益。

value(字符串):value参数是我们想要赋值给ngModel实例的实际值。

率先大家来看一个轻便的例证:

其一办法会更新调控器上地点的$viewValue,然后将值传递给每七个$parser函数(包罗验证器)。当班值日被深入分析,且$parser流水生产线中享有的函数都调用实现后,值会被赋给$modelValue属性,何况传递给指令中ng-model属性提供的说明式。最终,全体手续都产生后,$viewChangeListeners中持有的监听器都会被调用。注意,单独调用$setViewValue()不会孳生三个新的digest循环,因此只要想翻新指令,需求在设置$viewValue后手动触发digest。$setViewValue()方法适合于在自定义指令中监听自定义事件(比如采纳具备回调函数的jQuery插件),大家会愿目的在于回调时设置$viewValue并施行digest循环。

angular.module("myTest", [])
 .directive('multipleEmail', [function () {
  return {
   require: "ngModel",
   link: function (scope, element, attr, ngModel) {
    if (ngModel) {
     var emailsRegexp = /^([a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+(.[a-z0-9-]+)*[;;]?)+$/i;
    }
    var customValidator = function (value) {
     var validity = ngModel.$isEmpty(value) || emailsRegexp.test(value);
     ngModel.$setValidity("multipleEmail", validity);
     return validity ? value : undefined;
    };
    ngModel.$formatters.push(customValidator);
    ngModel.$parsers.push(customValidator);
   }
  };
 }])

$formatters

页面Html部分代码如下:

$formatters的值是叁个由函数组成的数组,在那之中的函数会以流水生产线的款型在数据模型的值爆发变化时被每种调用。它和$parser流水线互不影响,用来对值实行格式化和改造,以便在绑定了那些值的控件中显得。

<form class="form-horizontal" role="form" id="custom_form" name="custom_form" novalidate>
   <div class="form-group">
    <label class="col-sm-2 control-label">多个email</label>
    <div class="col-sm-10">
     <input multiple-email name="user_email" ng-model="user.email" required class="form-control" placeholder="自定义验证,多个邮箱地址,以“;”或者“;”分割" />
     验证通过:{{custom_form.user_email.$valid}}
    </div>
   </div>
   <div class="form-group text-center">
    <input class="btn btn-primary btn-lg" ng-disabled="custom_form.$invalid" type="submit" value="提交" />
   </div>
  </form>

 $viewChangeListeners

代码特其余简要,完成的功用如下所示:

$viewChangeListeners的值是多少个由函数组成的数组,在那之中的函数会以流水生产线的花样在视图中的值产生变化时被每个调用。通过$viewChangeListeners,能够在无需利用$watch的动静下实现类似的一言一动。由于再次来到值会被忽略,由此这个函数不必要重回值。

图片 8

 $error

这段代码很轻松,不过涉及到了ngModelController的多少个主要的习性$viewValue

$error指标中保留着尚未通过验证的验证器名称以及相应的错误消息。

$viewValue属性保存着立异视图所需的莫过于字符串。

 $pristine

$modelValue

$pristine的值是布尔型的,能够告诉我们顾客是还是不是对控件实行了退换。

$modelValue由数据模型持有。$modelValue和$viewValue大概是见仁见智的,取决于$parser流水生产线是还是不是对其打开了操作。

 $dirty

$parsers

$dirty的值和$pristine相反,能够告知我们客户是不是和控件进行过互动。

$parsers的值是二个由函数组成的数组,当客户同调节器进行互相,并且ngModelController中的$setViewValue()办法被调用时,其中的函数在当客商同调控器进行互相,况且ngModelController中的$setViewValue()方法被调会以流水生产线的样式被逐条调用。ngModel从DOM中读取的值会被传入$parsers中的函数,并逐一被中间的分析器管理。那是为了对值进行拍卖和修饰。

$valid

备考:ngModel.$setViewValue()函数用于安装功用域中的视图值。

$valid值能够告诉大家当前的控件中是还是不是有荒唐。当有荒唐时值为false,没错误时值为true。

ngModel.$setViewValue()函数能够承受二个参数。

$invalid

value(字符串):value参数是大家想要赋值给ngModel实例的实际值。

$invalid值能够告知大家当下控件中是否存在至少贰个荒谬,它的值和$valid相反。

本条格局会更新调节器上本土的$viewValue,然后将值传递给每二个$parser函数(包含验证器)。当班值日被分析,且$parser流水生产线中有所的函数都调用完毕后,值会被赋给$modelValue属性,何况传递给指令中ng-model属性提供的表明式。最后,全数手续都达成后,$viewChangeListeners中全数的监听器都会被调用。注意,单独调用$setViewValue()不会挑起七个新的digest循环,由此一旦想翻新指令,须要在设置$viewValue后手动触发digest。$setViewValue()方法适合于在自定义指令中监听自定义事件(举个例子选用具备回调函数的jQuery插件),大家会愿意在回调时设置$viewValue并推行digest循环。

以上就是本文的全体内容,希望对大家落成AngularJS表单验证有所补助。

$formatters

你或者感兴趣的篇章:

  • AngularJS实现表单验证
  • AngularJS使用ngMessages进行表单验证
  • angular完成表单验证及提交功能
  • AngularJS中贯彻客商访谈的地方验证和表单验证成效
  • AngularJS使用angular-formly进行表单验证
  • 详细解读AngularJS中的表单验证编制程序
  • AngularJS手动表单验证
  • Angular表单验证实例详解
  • AngularJS自动表单验证
  • Angular落成表单验证成效

$formatters的值是三个由函数组成的数组,在那之中的函数会以流水生产线的样式在数据模型的值发生变化时被逐条调用。它和$parser流水生产线互不影响,用来对值进行格式化和转移,以便在绑定了那些值的控件中展现。

$viewChangeListeners

$viewChangeListeners的值是贰个由函数组成的数组,在那之中的函数会以流水生产线的样式在视图中的值产生变化时被每一个调用。通过$viewChangeListeners,能够在没有供给选用$watch的景观下完毕类似的作为。由于重回值会被忽略,因而那些函数无需重返值。

$error

$error对象中保存着未有通过验证的验证器名称以及对应的错误音讯。

$pristine

$pristine的值是布尔型的,能够告诉大家客户是或不是对控件进行了改变。

$dirty

$dirty的值和$pristine相反,能够告诉大家客户是不是和控件进行过互动。

$valid

$valid值能够告诉我们近年来的控件中是否有不当。当有不当时值为false,未有不当时值为true。

$invalid

$invalid值能够告知咱们近来控件中是不是存在至少三个错误,它的值和$valid相反。

读书完基础的知识点, 要求深刻学习下自定义表达的写法,已经ng1.3过后对认证指令的易用性有所进步。

以上所述是我给我们介绍的用AngularJs验证表单实例详解,希望能够帮助到大家,后续还或然会不断给大家更新angularjs验证表单的连带文化,敬请关心脚本之家网站!

你或者感兴趣的篇章:

  • AngularJS达成表单验证
  • AngularJS使用ngMessages实行表单验证
  • 详解AngularJS实现表单验证
  • AngularJS中达成客户访谈的身份验证和表单验证功效
  • AngularJS使用angular-formly实行表单验证
  • 详见解读AngularJS中的表单验证编制程序
  • AngularJS手动表单验证
  • AngularJS自动表单验证
  • 详解AngularJS中的表单验证(推荐)
  • AngularJS表单验证作用

本文由小鱼儿玄机二站发布于关于计算机,转载请注明出处:AngularJs表单验证实例详解,详解AngularJS达成表单

关键词: