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

一、表单验证基本原理

　　表单验证包括两个主题：

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

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

　　<form ng-submit=vm.submit(vm.form)  novalidate="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指令

<input id="_retypedPassword" bf-field-error type="password" ng-required="true" ng-model="vm.retypedPassword" bf-assert-same-as="vm.form.password"/>

　　当确认密码和密码不同的时候，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指令，让自定义错误信息自己传进去，如下：

<input id="_retypedPassword" bf-field-error="{same:'确认密码必须与密码相同'}" type="password" ng-required="true" ng-model="vm.retypedPassword" bf-assert-same-as="vm.form.password"/>

　　修改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;
　};
});

　　整个执行过程如下：

• 用户输入
• angular执行所有$parsers中的函数
• 遇到$setValidity("xxoo",false);那么就会把xxoo当做一个key设置到$ngModel.$error["xxoo"]
• 然后bf-field-error指令会ng-repeat $ngModel.$error
• error会对错误信息转义
• 最后显示错误的信息