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

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