angular 指令梳理 —— 前端校验

angular js内置校验的扩展

校验成功则 scope.formName.$valid=true

校验失败  元素的class： ng-invalid

成功：.ng-valid

/**
 * 校验指令. <input ng-model="data.user" ng-validate="{require:true,number：true}" >
 */
.directive('htValidate', [function () {
      return {
          require: "ngModel",
          link: function (scope, element, attr, ctrl) {
              var validate = attr.htValidate;
              var permission=getPermission(attr.permission,scope);//权限。
              //如果没有必填权限且没有其他校验返回
              if(permission!=="b" && validate=="{}")return;
             var validateJson = eval('(' + validate + ')');if(permission=="b")validateJson.required = true;//如果必填权限。默认必填

              var customValidator = function (value) {
                  if(!validate) return true;
　　　　　　　　　　handlTargetValue(validateJson);//特殊处理可忽略
                  var validity =  $.fn.validRules(value,validateJson,element);//调用系统校验，做出错提示返回true/false
                  ctrl.$setValidity("customValidate", validity);
                  return validity ? value : undefined;
              };
              //modelValue To ViewValue 的时候不通过校验 则不展示
              ctrl.$formatters.push(customValidator);
              ctrl.$parsers.push(customValidator);
              //特殊的一些处理 可忽略
              //获取比较目标字段的值。   所有比较的都包含target对象eg:{eq:{target:data.mian.name}}
              var handlTargetValue = function(validateJson){
                  for(key in validateJson){
                      if(validateJson[key].target){
                          validateJson[key].targetVal =eval("scope."+dateRange.target);
                      }
                  }
              }

          }
      };
  }])

精简版：

 .directive('htValidate',function () {
       return {
           require: "ngModel",
           link: function (scope, element, attr, ctrl) {
               var validate = attr.htValidate;
　　　　　　　　　　if(!validate)return;
               var validateJson = eval('(' + validate + ')');

               var customValidator = function (value) {
22 　　　　　　　　　　var validity =  $.fn.validRules(value,validateJson,element); //return true/false
                    ctrl.$setValidity("customValidate", validity);
                   return validity ? value : undefined;
               };

               ctrl.$formatters.push(customValidator);
               ctrl.$parsers.push(customValidator);
           }
       };
   })

出错可以通过qtip等进行提示。边框也可以根据错误样式做出一些改变eg:

  input.ng-valid,textarea.ng-valid ,select.ng-valid ,.edui-editor.ng-valid,.ng-invalid .ht-input {
     border-color: #5eb95e !important;
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 .ng-dirty input{
     background-color: white;
 } 

 input.ng-invalid,textarea.ng-invalid, select.ng-invalid, .edui-editor.ng-invalid ,span.ng-invalid input,.ng-invalid .ht-input
 {
     border-color: #dd514c !important;;
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 div.ng-invalid label, span.ng-invalid a{
     color:red;
 }

 table.ng-invalid {
     border-color: #dd514c !important;
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }

ng-valid ng-invalid CSS

$.fn.validRules(value,validateJson,element); 这部分代码。只有一半是本人写的。就不拿出来了。就是校验+qtip 提示。