angular 指令梳理 —— 前端校验

时间:2021-07-06 08:48:26

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 提示。