详解AngularJS实现表单验证(3)

.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 role="form" novalidate> <div> <label>多个email</label> <div> <input multiple-email ng-model="user.email" required placeholder="自定义验证,多个邮箱地址,以“;”或者“;”分割" /> 验证通过:{{custom_form.user_email.$valid}} </div> </div> <div> <input ng-disabled="custom_form.$invalid" type="submit" value="提交" /> </div> </form>

代码非常的简单,实现的效果如下所示:

详解AngularJS实现表单验证

这段代码很简单,但是涉及到了ngModelController的几个重要的属性
$viewValue

$viewValue属性保存着更新视图所需的实际字符串。

$modelValue

$modelValue由数据模型持有。$modelValue和$viewValue可能是不同的,取决于$parser流水线是否对其进行了操作。

$parsers

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzwwj.html