前端数据校验封装

在工作中我看了很多人的前端数据校验代码都是通过if ;else if 来校验;这样写看起来不但不美观，而且数据多的话就很恶心了，于是就产生想法，封装了一个前端校验

主要方法是

方法名	描述
validata	该方法接收一个参数，参数可以是数组和对象格式下面说
handlerArrayValiData	这个函数处理参数是数组的【私有】
handlerObjValiData	这个函数处理参数是对象的【私有】

其他方法是辅助的

handlerArrayValiData 方法

接收一个数组参数；格式

[
	{
		msg: '提示信息',
		value: '数据'，
		expr: '表达式' //可以是[Function ,String , RegExp , Boolean]
		//String 对应常用自定义的正则
	},
]

handlerObjValiData方法

接收一个对象参数；格式

{
	data: {name: "张三" ,age: 13 ,password: ''} //真实数据对象
	target：{
		name: '姓名不可为空'，
		password: '密码不可为空'
	}
}

源码

// commons.js
import REG from "./reg"
const toString = Object.prototype.toString ;
/**
     * 处理数组验证
     * @param {*} target 
     * @param {*} reslove 
     * @param {*} reject 
     * @returns 
     */
 function handlerArrayValiData(target ,reslove,reject ){
    for(let item of target){
        let expr = item.expr;
        if(this.isString(expr)){
            expr = REG[expr] ;
        }
        if(this.isBool(expr)){
            if(!expr){
                return reject({
                    msg: item.msg , 
                    status: false
                })
            }
        }else  if(this.isTrue(expr)){
            if (this.isRegExp(expr)) {
                if(!expr.test(item.value)){
                    return reject({
                        msg: item.msg , 
                        status: false
                    })
                }
            }else if(this.isFun(expr)){
                let res = expr() ;
                if(!this.isTrue(res)){
                        return reject({
                            msg: item.msg , 
                            status: false
                        })
                }
            }else{
                console.warn("没有合适的比较!!!")
                return reject({
                    msg: item.msg , 
                    status: false
                })
            }
        }else{
            if(this.isEmpty(item.value)){
                return reject({
                    msg: item.msg , 
                    status: false
                })
            }
        }
    }
    return reslove({
        msg: '验证通过',
        status: true
    })
}

/**
 * 处理对象验证
 * @param {*} param0 
 * @param {*} reslove 
 * @param {*} reject 
 */
function handlerObjValiData({data = {}, target = {}} ,  reslove , reject){
    for(let key in target){
        if(this.isEmpty(data[key])){
           return reject({
                msg: target[key],
                status: false
            })
        }
    }
    return reslove({
        msg: '验证通过',
        status: true
    })
}
export default {
    /**
     * 参数是数组或者对象
     * @param {*} target 
     * @returns 
     */
    validata(target){
        // true : 成功 , false : 失败
        return new Promise((reslove , reject)=>{
            if(this.isArray(target)){
                handlerArrayValiData.call( this, target, reslove , reject)
            }else if(this.isObj(target)){
                handlerObjValiData.call(this , target ,reslove , reject ) ;
            }else {
                throw new Error("参数是数组[{msg: '' , value: '' , expr: ''}]或者对象{}")
            }
        })
    },
    
    //只比较字符串
    isBlank(target){
        if(this.isValid(target) && this.isString()){
           return this.trim(target).length === 0 ;
        }
        return false ;
    },
    /**
     * 去除空格
     * @param {\} target 
     * @returns 
     */
    trim(target){
        if(this.isString(target)){
            return target.replace(/\s*/g,"");
        }
        return target ;
    },
    /**
     * 是否为空
     * @param {*} target 
     * @returns 
     */
    isEmpty(target){
        if(this.isString(target)){
            return target.length === 0;
        }else if(this.isObj(target)){
            return Object.keys(target).length === 0 ;
        }else if(this.isArray(target)){
            return target.length === 0 ;
        }
        return (target === null  ||  target === undefined)
    },
    isString(target){
        return toString.call(target) === "[object String]"
    },
    isUndef(target){
        return toString.call(target) === "[object Undefined]"
    },
    isNull(target){
        return toString.call(target) === "[object Null]"
    },
    /**
     * 有效
     * @param {*} target 
     * @returns 
     */
    isValid(target){
        return (!this.isNull(target) && !this.isUndef(target))
    },
    //[object RegExp]
    isRegExp(target){
        return toString.call(target) === "[object RegExp]"
    },
    isObj(target){
        return toString.call(target) === "[object Object]"
    },
    isArray(target){
        return toString.call(target) === "[object Array]"
    },
    isTrue(target){
        return Boolean(target) === true
    },
    isFun(target){
        return toString.call(target) === "[object Function]"
    },
    isBool(target){
        //isBool
        return toString.call(target) === "[object Boolean]"
    }

}

reg.js文件

const REG = {
    username: /\w{4,10}/,
    cardId: /^\d{15}|\d{18}$/, //
    password: /(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,20}$/, //必须包含数字或字母6-20位
    email: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ ,//邮箱
    phone: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])d{8}$/ //手机号码
}

export  default REG

使用

1、参数为对象类型

//参数为对象类型的
//导入commons.j
let person = {
	name: 'lisi',
	password: '123456',
	hobby: ['A','B', 'C'],
	other: '其他' 
}
commons.validate({
	data: person ,
	target: {
		// 不需要验证就不用写对应的key
		name: '姓名不可为空',
		password: '密码不可为空',
		hobby: '至少选择一个'
	}
}).then(item=>{
	//校验成功
},item=>{
	//校验失败
})

参数为数组类型

//数组对象
commons.validate([
	{
		msg: '姓名不可为空',
		value: person.name,
	},
	{
		msg: '首字符必须是大写字符',
		value: person.password,
		expr: /^[A-Z]/
	},
	{
		msg: '爱好必须选择三个以上',
		value: person.hobby,
		expr: person.hobby.length >= 3
	}
]).then(item=>{
	//校验成功
},item=>{
	//校验失败
})

以上代码通过简单测试；