当前位置：首页 > 资讯 > 技术文档

AngularJs表单验证实例详解

时间：2020-06-01 03:51 编辑：来源：阅读：
扫一扫，手机访问

摘要：AngularJs表单验证实例详解

[b]常用的表单验证指令[/b] [b]1. 必填项验证[/b] 某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：

[url=~/Content/css/bootstrap.min.css]

效果如下： [img]http://files.jb51.net/file_images/article/201605/2016053010534521.gif[/img] 同时，ng针对这几种验证指令，针对性的设置了一些css样式它们包括：

[u]复制代码[/u][/url] 代码如下:

.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 { }

它们对应着表单输入字段的特定状态。例如当某个字段中的输入非法时，.ng-invlid类会被添加到这个字段上。你可以编辑自己喜欢的CSS . 你可以私有定制化这些类来实现特定的场景应用. 但是，默认的验证指令不一定能够，完全满足我们的真实应用场景，ng同样提供的自定义验证指令的功能。首先我们来看一个简单的例子：

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);
   }
  };
 }])

页面Html部分代码如下：

<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>

代码非常的简单，实现的效果如下所示： [img]http://files.jb51.net/file_images/article/201605/2016053010534522.gif[/img] 这段代码很简单，但是涉及到了ngModelController的几个重要的属性$viewValue $viewValue属性保存着更新视图所需的实际字符串。 [b]$modelValue[/b] $modelValue由数据模型持有。$modelValue和$viewValue可能是不同的，取决于$parser流水线是否对其进行了操作。 [b]$parsers[/b] $parsers的值是一个由函数组成的数组，当用户同控制器进行交互，并且ngModelController中的[i]$setViewValue()[/i]方法被调用时，其中的函数在当用户同控制器进行交互，并且ngModelController中的$setViewValue()方法被调会以流水线的形式被逐一调用。ngModel从DOM中读取的值会被[i]传入$parsers[/i]中的函数，并依次被其中的解析器处理。这是为了对值进行处理和修饰。备注：ngModel.$setViewValue()函数用于设置作用域中的视图值。 ngModel.$setViewValue()函数可以接受一个参数。 value（字符串）：value参数是我们想要赋值给ngModel实例的实际值。这个方法会更新控制器上本地的$viewValue，然后将值传递给每一个$parser函数（包括验证器）。当值被解析，且$parser流水线中所有的函数都调用完成后，值会被赋给$modelValue属性，并且传递给指令中ng-model属性提供的表达式。最后，所有步骤都完成后，[i]$viewChangeListeners[/i]中所有的监听器都会被调用。注意，单独调用$setViewValue()不会唤起一个新的digest循环，因此如果想更新指令，需要在设置$viewValue后手动触发digest。$setViewValue()方法适合于在自定义指令中监听自定义事件（比如使用具有回调函数的jQuery插件），我们会希望在回调时设置$viewValue并执行digest循环。 [b]$formatters[/b] $formatters的值是一个由函数组成的数组，其中的函数会以流水线的形式在数据模型的值发生变化时被逐一调用。它和$parser流水线互不影响，用来对值进行格式化和转换，以便在绑定了这个值的控件中显示。 [b]$viewChangeListeners[/b] $viewChangeListeners的值是一个由函数组成的数组，其中的函数会以流水线的形式在视图中的值发生变化时被逐一调用。通过$viewChangeListeners，可以在无需使用$watch的情况下实现类似的行为。由于返回值会被忽略，因此这些函数不需要返回值。 [b]$error[/b] $error对象中保存着没有通过验证的验证器名称以及对应的错误信息。 [b]$pristine[/b] $pristine的值是布尔型的，可以告诉我们用户是否对控件进行了修改。 [b]$dirty[/b] $dirty的值和$pristine相反，可以告诉我们用户是否和控件进行过交互。 [b]$valid[/b] $valid值可以告诉我们当前的控件中是否有错误。当有错误时值为false，没有错误时值为true。 [b]$invalid[/b] $invalid值可以告诉我们当前控件中是否存在至少一个错误，它的值和$valid相反。学习完基础的知识点, 需要深入学习下自定义验证的写法，已经ng1.3之后对验证指令的易用性有所提高。以上所述是小编给大家介绍的用AngularJs验证表单实例详解，希望能够帮助到大家，后续还会持续给大家更新angularjs验证表单的相关知识，敬请关注编程素材网网站！

全部评论(0)

上一篇：浅谈Angular路由复用策略
下一篇：Vue常用指令V-model用法

资讯排行榜
更多>>