react 指令封装 - validator校验

ゞ浴缸里的玫瑰 2022-06-18 09:42 376阅读 0赞

# 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-Z\d_]{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 ，例如：**

![这里写图片描述][SouthEast]

**简单实现效果：**

**示例1：**

![示例1][1]

**示例2：**

![示例2][2]

--------------------

好了，完美的使用吧！

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

--------------------

[SouthEast]: /images/20220618/4895471d50b54582be9c085e9e8a7a53.png
[1]: /images/20220618/9952cbfb503e4349b0a9c748692b91c0.png
[2]: /images/20220618/398c7850f58f4fb38963839117d04471.png