angular1.x指令校验与vue2.x校验在项目中的对比

angular1.x指令：

/**
 * 页面表单通用指令。
 */
var directive = angular.module("baseDirective", ["base"])
    /**
     * 校验指令. 用法： <input type="text" ng-model="user.name"
     * ab-validate="{require:true}" />
     * 
     * 具体的规则： /js/common/CustomValid.js 的rules 内置规则。
     */
    .directive('abValidate', [function () {
        return {
            require: "ngModel",
            link: function (scope, element, attr, ctrl) {
                var validate = attr.abValidate;

                var validateJson = eval('(' + validate + ')');
                if (!ctrl.validateJson) {
                    ctrl.validateJson = validateJson;
                } else {
                    $.extend(ctrl.validateJson, validateJson);
                }


                var customValidator = function (value) {
                    if (!validate) return true;
                    // 在只读场景下只会搞一次、第一次数据还没有导致错误校验
                    if (value === undefined && ctrl.$modelValue) {
                        value = ctrl.$modelValue;
                    }

                    handlTargetValue(validateJson);
                    var validity = jQuery.fn.validRules(value, ctrl.validateJson, element);
                    ctrl.$setValidity("customValidate", validity);
                    return validity ? value : undefined;
                };

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

对比Vue2.x校验：

import Vue from 'vue'
import formValidator from './formValidator'
/**
 * 校验,依赖 v-model 或者 组件的 input 事件
 * 
 */
Vue.directive("AbValidate", {
    inserted: function (el, binding, vnode) {
        formValidator.doValidate(el, binding, vnode);

        //  原生 input 没有 update 动作，这里做input事件补偿
        var validateHandler = function (e) {
            if(!e) e = '';
            if (e.target && e.target !== el) return;

            var value = e.target ? e.target.value : e;
            formValidator.doValidate(el, binding, vnode, value);
        }

        if (vnode.componentInstance) {
            vnode.componentInstance.$on("input", function (value) {
                validateHandler(value);
            })
        } else {
            addEvent(el, 'input', validateHandler);
        }
        try {
            if(binding.value.required){
                var parentEl = $(el).parent();
                var labelEl = $(parentEl).prev();
                if(labelEl.is('label')){
                    labelEl.addClass('ant-form-item-required')
                }
            }
        } catch (error) {}
    },
    update: function (el, binding, vnode, oldVnode) {
        if (el.value === undefined) return;

        var oldValue = vnode.elm.$_oldValue;
        if (oldValue !== el.value) {
            formValidator.doValidate(el, binding, vnode, el.value);
        }
        vnode.elm.$_oldValue = el.value;
    },
    unbind: function (el, binding, vnode, oldVnode) {
        // 清除该字段校验
        if (vnode.context.$validity[vnode.data.attrs.desc]) {
            delete vnode.context.$validity[vnode.data.attrs.desc];
        }
    }

})