validator相关的指令
2016-09-19 本文已影响0人
yb_剑笙
概述
数据输入有效性校验相关的指令一共有四个，实际是八个（每一个指令都有一个ng开头的同名指令）：
| 指令 | 说明 |
|---|---|
| required，ng-required | 必须有输入 |
| pattern，ng-pattern | 正则或函数进行校验 |
| minlength，ng-minlength | 最小长度控制 |
| maxlength，ng-maxlength | 最大长度控制 |
这个指令必须依赖ng-model，如果没有设置ng-model，就不会有任何动作。
实现细节
四个指令的实现细节基本上是一模一样的：
1、设置controller的校验回调函数。
2、监控对应的属性，如果数据发生变化，就调用model controller的$validate进行有效性校验。
以required为例：
ctrl.$validators.required = function(modelValue, viewValue) {
return !attr.required || !ctrl.$isEmpty(viewValue);
};
attr.$observe('required', function() {
ctrl.$validate();
});
| 指令 | 回调函数名称 |
|---|---|
| required，ng-required | $validators.required |
| pattern,ng-pattern | $validators.pattern |
| maxlength,ng-maxlength | $validators.maxlength |
| minlength,ng-minlength | $validators.minlength |
四个指令对应的校验回调：
| 指令 | 回调函数名称 |
|---|---|
| required，ng-required | $validators.required |
| pattern,ng-pattern | $validators.pattern |
| maxlength,ng-maxlength | $validators.maxlength |
| minlength,ng-minlength | $validators.minlength |
这些回调会在ng-model中调用：
function processSyncValidators() {
var syncValidatorsValid = true;
forEach(ctrl.$validators, function(validator, name) {
var result = validator(modelValue, viewValue);
syncValidatorsValid = syncValidatorsValid && result;
setValidity(name, result);
});
if (!syncValidatorsValid) {
forEach(ctrl.$asyncValidators, function(v, name) {
setValidity(name, null);
});
return false;
}
return true;
}
从中可以看出，当需要添加或值修改ng-model的校验方式时，只需要修改$validators的属性就可以了。
样例代码
<!DOCTYPE html>
<html lang="en" ng-app="app">
<!--<html>-->
<head>
<title>Test</title>
</head>
<body>
<div ng-controller="ExampleController">
<form name="form">
<label for="required">Toggle required: </label>
<input type="checkbox" ng-model="required" id="required" />
<br>
<label for="input">This input must be filled if `required` is true: </label>
<input type="text" ng-model="model" id="input" name="input" ng-required="required" /><br>
<hr>
required error set? = <code>{{form.input.$error.required}}</code><br>
model = <code>{{model}}</code>
</form>
</div>
<script src="./node_modules/angular/angular.js" type="text/javascript"></script>
<script>
angular.module('app', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.required = true;
}]);
</script>
</body>
</html>
这段代码实现了一个控制输入框的required属性的功能，可以看到required属性为treu和false时输入框为空时的数据变化。
