AngularJS 表单数据验证及错误信息提示

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、表单验证基本原理

表单验证包括两个主题：

定义验证规则，验证数据有效性。
显示验证结果，把验证结果以友好的方式显示给用户。

H5内置一些验证功能，并会显示内置的错误提示信息，先要禁用它，在<form>上加个novalidate特性。如下：

比如验证邮箱输入框input,验证两点，一是邮箱格式合法，二是必填。

对于邮箱格式，AngularJS有个内置指令，只要设置input=email，接收输入的时候会检测格式是否合法，并设置有效性标志。

对于必填，可以使用HTML自带的required,<input type="email" required="required"/>，可以使用AngularJS的ng-required,<input type="email" ng-required="true"/>,ng-required可以可以编程控制，其值可以是一个scope变量，<input type="email" ng-required="vm.needEmail"/>，而required这种HTML属性，出现就有效不管它有没有值。

每次用户输入之后，这些验证器就会按照优先级和出现的顺序依次被验证，如果验证全部成功，就会把输入转换成Model中的值，如果有一个验证不成功，Model中的值保持原样，并在Model上增加一个$error对象，每一个验证器都会增加一个与验证器同名的属性，并值为true,如{email:true}。

要在模板上引用，需要在form和input上都指定一个名字name,这样在$scope上就多出一个form变量，其内容如下：

主要的几个变量解释如下：

email字段的Model如下：

与form的几个属性是一样的，意义也一样，这里，我们主要用到$dirty/$pristine、$valid/$invalid、$error，举个最简单的例子：

字段多了，模板中会出现重复代码，可以用以下的错误信息提示指令解决该问题。

二、错误信息提示指令

angular.module('com.ngnice.app').directive('bfFieldError',function bfFieldError($compile){return {restrict:'A',//必须以属性方式使用<input bf-field-error />require:'ngModel',//元素上必须有个ng-model属性，没有就会报错//link函数在指令初始化的时候自动执行link:function(scope,element,attrs,ngModel){//ngModel是require定义的值var subScope= scope.$new(true);//创建一个子作用域，true为独立作用域，不会父作用域自动继承属性//创建子作用域subScope下的两个函数
//判断是否有错误，有错误就要显示错误信息subScope.hasError = function(){return ngModel.$invalid && ngModel.$dirty;//无效而且有输入才表示有错误};//获取错误信息内容，直接把错误信息显示到界面subScope.errors = function(){return ngModel.$error;};//把一段html编译成LiveDom,并把子作用域当参数传进去，DOM会根据subScope的变化更新自己var hint = $compile('<ul ng-if="hasError()">{{errors()}}</ul>')(subScope);//errors()内容是{email:true}//把这段DOM追加到当前元素后边，让他显示出来
element.after(hint);}};});

分析下，指令间协作配合机制，require属性指定另一个指令的名称，如上边的rquire:"ngModel",angularjs初始化的时候，会在指令所在元素寻找指令ng-model，并取得其控制器实例，并当作link函数的第四个参数传进去，就可以使用ngModel里边的属性了。

改进html部分，用ng-repeat，而且用过滤器让提示信息更友好，见后边的过滤器

var hint = $compile('<ul ng-if="hasError()"><li ng-repeat="(name,wrong) in errors()" ng-if="wrong">{{name|error}}</li></ul>')(subScope);

三、友好提示信息的过滤器

过滤器的实质是数据转换，格式化和筛选，这里是一个格式化函数，把Model层的数据类型转换成View层显示的友好信息。

angular.module('com.ngnice.app').filter('error', function(){var messages={
email:'不是有效的格式的邮件地址',
required:'此项不能为空'
};
return function(name){
return messages[name]||name;
};
});

错误类型以后变更多，可以把message信息提取出去，建一个Constant,改造如下

常量，专门用来存放提示信息

angular.module('com.ngnice.app').constant('Error', {
email:'不是有效的格式的邮件地址',
required:'此项不能为空'
});

过滤器,把常量Error注入到过滤器 error中

angular.module('com.ngnice.app').filter('error', function(Errors){
return function(name){
return Errors[name]||name;
};
});

四、自定义验证规则指令

1、密码相同验证指令

angular.module('com.ngnice.app').directive('bfAssertSameAs',function bfAssertSameAs(){return {restrict:'A',require:'ngModel',link:function(scope,element,attrs,ngModel){ //取参数attrs传进来的bf-assert-same-as属性表达式，并用$eval,再比较两个值（还有个是参数传进去的值）是否相等。
var isSame = function(value){
var anotherValue = scope.$eval(attrs.bfAssertSameAs);
return value === anotherValue;
};
ngModel.$parsers.push(function(value){
ngModel.$setValidity('same',isSame(value));
return isSame(value) ? value : undefined;
});
scope.$watch(
function(){
return scope.$eval(attrs.bfAssertSameAs);
},
function(){
ngModel.$setValidity('same', isSame(ngModel.$modelValue));
}

}};});

html部分，同时使用了bfFieldError指令

当确认密码和密码不同的时候，bf-field-error指令在检查结果中显示"same",看这句代码

ngModel.$setValidity('same', isSame(ngModel.$modelValue));分析：

$ngModel.$parsers是一个数组，当在输入框输入内容的时候，都会遍历并执行$parsers里面的函数。

$ngModel.$setValidity("same",false);设置same为无效，会设置$ngModel.$error["same"] = false; {"same" : false}

可以在常量中添加一项：

angular.module('com.ngnice.app').constant('Error', {
email:'不是有效的格式的邮件地址',
required:'此项不能为空',
same:'此项必须与上一项相同'
});

到此时，通用性还不够好，可以进一步，修改bf-field-error指令，让自定义错误信息自己传进去，如下：

修改bf-field-error指令代码：

subScope.customMessages=scope.$eval(attrs.bfFieldError);//取得一个自定义消息对象{same:'确认密码必须与密码相同'}

//把自定义消息对象customMessages传给过滤器

var hint = $compile('<ul ng-if="hasError()"><li ng-repeat="(name,wrong) in errors()" ng-if="wrong">{{name|error:customerMessages}}</li></ul>')(subScope);

最后要修改下过滤器error：

angular.module('com.ngnice.app').filter('error', function(Errors){
return function(name, customMessages){
var errors = angular.extend({},Errors,customMessages);
return errors[name]||name;
};
});

整个执行过程如下：