VUE 表单验证插件

/**
 * VUE 表单验证插件
 * User: liupeilong
 * Date: 2019/4/26
 * Time: 10:50
 */
var validation = {
    install:function(Vue, options){
        var validationConfig = {
            listenerEvent:"change",
            validationMsg:function( context , el = null ){
                layer.msg(context);
            },
            validationLanguage:{
                required:"参数不能为空",
                email:"邮箱格式不正确",
                numeric:"参数值不是数字",
                datetime:"参数值只能是时间日期格式",
                date:"参数值只能是日期格式",
                enumeration:"参数值不在枚举项中",
            },
        }

        var elements = {};
        var validationHandle = function(el,binding){
            for(index in binding.value){
                if( !validationObg[index](binding.value[index],el.value.replace(/(^\s*)|(\s*$)/g,"")) ){
                    validationConfig.validationMsg(validationConfig.validationLanguage[index]);
                    return false;
                }
            }
            return true;
        }
        var validationObg = {
            //不能为空
            required:function( boolean , value ){
                if( boolean == true ){
                    if( !value || value == undefined ){
                        return false;
                    }
                }
                return true;
            }
            //是否邮箱
            ,email:function( binding , str ){
                if(str==null||str=="") return false;
                var result=str.match(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/);
                if(result==null)return false;
                return true;
            }
            //是否是数字
            ,numeric:function( binding , value ){
                var regPos = /^\d+(\.\d+)?$/; //非负浮点数
                var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
                if(regPos.test(value) || regNeg.test(value)){
                    return true;
                }
                return false;
            }
            //判断是否是时间日期 2019-04-28 10:12:12
            ,datetime:function( binding , value ){
                var a = /^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/
                if( !a.test(value) ) { 
                    return false 
                } 
                return true 
            }
            //判断是否是日期 2019-04-28
            ,date:function( binding , value ){
                var a = /^(\d{4})-(\d{2})-(\d{2})$/
                if( !a.test(value) ) { 
                    return false 
                } 
                return true 
            }
            //判断是否是枚举中的值
            ,enumeration:function( binding , value ){
                if( binding.indexOf(value) == -1 ){
                    return false;
                }
                return true;
            }
        }
        Vue.directive('validate',function(el, binding, vnode, oldVnode){
            elements[el.name] = {el:el,binding:binding,}
            el.addEventListener(validationConfig.listenerEvent, function(e){
                validationHandle(el,binding);
            });
        });

        Vue.mixin({
            created:function(){
            },
            updated:function(){

            }
        });
        Vue.prototype.$validationCheck = function( input_name ) {
            validationHandle(elements[input_name].el,elements[input_name].binding);
        }
        Vue.prototype.$validationCheckAll = function() {
            for( index in elements ){
                if( !validationHandle(elements[index].el,elements[index].binding) ){
                    return false;
                }
            }
        }
    }
}
Vue.use(validation);