zl程序教程

您现在的位置是:首页 >  其他

当前栏目

react 指令封装 - validator校验

2023-04-18 14:44:43 时间

react 指令封装 - validator校验

React validator 封装

form表单校验,可以引入针对于form表单的校验,但是个人嫌弃其他文件的校验方式引用文件比较大,所以自己封装了个简单的检验方式,而react又没有指令这个概念,所以个人仿照vue 的指令,简单的封装 了一个 validator 的检验方式。


优点

1、体积小,未压缩前3k,简单实现了非空校验跟正则校验。

2、相对灵活,兼容性好,不管是放到vue 还是 react 或者是原生js,都可以正常使用 。

3、易维护


下面附上代码:

directives.js(核心)文件

export default {
    //正则表
    regList: {
        SmsCode: /^d{6}$/,
        /*短信正则*/
        Password: /(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}/,
        /*密码正则*/
        Mobile: /^[1][34578][0-9]{9}$/,
        /*手机号正则*/
        RealName: /^[u4e00-u9fa5 ]{2,10}$/,
        /*真实姓名正则*/
        WeiXin: /^[a-zA-Zd_]{5,19}$/,

        BankNum: /^d{10,19}$/,
        /*银行卡号正则*/
        Money: /^([1-9]d*|0)$/,
        /*钱正则*/
        Mail: /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/ /*邮件正则*/
    },
    showErr(name, checkResult) {
        var type = checkResult[0],
            ext = checkResult[1] || [];

        var ERR_MSG = {
            nonvoid: `${name}不能为空`,
            reg: `${name}格式错误`,
            limit: `${name}必须在${ext[0]}与${ext[1]}之间`,
            equal: `两次${ext}不相同`,
            unique: `${name}重复`
        }
        //提示信息alert()
        libUtils.toast(ERR_MSG[type]);
    },
    sync(_that, cb) { //负责绑定onchange事件
        let domList = document.querySelector(".va");
        if(!domList) return;

        /**
         * 禁止粘贴
         */
        domList.onpaste = (e) => {
            if(e.target.type === "password") { //密码框,禁止粘贴
                return false; //结束执行
            }
        }

        domList.addEventListener("input", (e) => { //这个是赋值操作
            let type = e.target.type;
            if(type === "tel" || type === "number") { //防止输入中文符号、特殊字符
                e.target.value = e.target.value.replace(/D/g, '');
            }
            if(cb) cb(e.target);
        });

    },
    bind(cb) {
        let domList = document.querySelectorAll(".va input");
        for(let i = 0; i < domList.length; i++) {
            let dom = domList[i],
                name = dom.name,
                value = dom.value,
                msg = domList[i].getAttribute("data-tag"),
                va = domList[i].getAttribute("data-va").split(".");
            let _result = this.check(value, va, msg);
            if(_result.length > 0) {
                this.showErr(msg, _result);
                return;
            }
        }
        if(cb) cb("校验成功!");
    },
    sendSmsCode(dom, cb) {
        let va = dom.getAttribute("data-va").split("."),
            value = dom.value,
            msg = dom.getAttribute("data-tag");

        let _result = this.check(value, va, msg);
        if(_result.length > 0) {
            this.showErr(msg, _result);
            return;
        }
        if(cb) cb("手机号校验成功!");
    },
    check(v, va, msg) {
        let res = 0,
            cfg = {
                //非空
                nonvoid: (v, bool) => {
                    if(bool) {
                        return v.trim() ? 0 : ['nonvoid'];
                    } else {
                        return 0;
                    }
                },
                reg: (v, reg) => reg.test(v) ? 0 : ['reg'], //正则
            }

        //如果canNull有值,说明改输入框可以为空,但是有值之后需要校验正则
        res = (va[1] || []) === "canNull" ? (v ? 0 : 2) : cfg['nonvoid'](v, true); //验证是否为空

        if(!res) {
            res = cfg['reg'](v, this.regList[va[0]]); //验证正则
        }
        return res;
    }

}

ps:简单的封装了 ==非空校验跟正则校验==,看一看其实很简单。

把正则表达式,放一块统一处理,简单的实现了处理效果,下面附上使用:

1、首先需要在表单上放置 va ,例如:

简单实现效果:

示例1:

示例2:


好了,完美的使用吧!

如果有什么不合理的地方,可以给我留言,优化改进!