AngularJs表单验证实例详解(3)

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>

代码非常的简单，实现的效果如下所示：

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

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

$modelValue

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

$parsers