.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>
代码非常的简单,实现的效果如下所示:
这段代码很简单,但是涉及到了ngModelController的几个重要的属性
$viewValue
$viewValue属性保存着更新视图所需的实际字符串。
$modelValue
$modelValue由数据模型持有。$modelValue和$viewValue可能是不同的,取决于$parser流水线是否对其进行了操作。
$parsers
$parsers的值是一个由函数组成的数组,当用户同控制器进行交互,并且ngModelController中的$setViewValue()方法被调用时,其中的函数在当用户同控制器进行交互,并且ngModelController中的$setViewValue()方法被调会以流水线的形式被逐一调用。ngModel从DOM中读取的值会被传入$parsers中的函数,并依次被其中的解析器处理。这是为了对值进行处理和修饰。
备注:ngModel.$setViewValue()函数用于设置作用域中的视图值。
ngModel.$set ViewValue()函数可以接受一个参数。
value(字符串):value参数是我们想要赋值给ngModel实例的实际值。