js - 表单元编程 简化你的校验 释放检验数据的麻烦

在不同的框架里面我们可能会用不同的插件， 或者自己写一套。

以vue为例子，

不管是element-ui自带的校验， 还是专门做校验的vee-validate， 都太过于繁琐了， 而且还不好自定义。

比如我只想要提交的时候， 校验下这些信息， 劳资为啥要去配置一大堆东西， 视图层一个， 逻辑层一个， 配置层一个。

先看下element-ui

耦合度高， 代码量也多。
这个还算好，都是自带的校验方式，如果是自定义的呢。

再看这个， 是不是想死。

我只要校验两个东西而已， 写这么多东西。

上面的代码理想中应该是这样：

···
校验是否输入密码
校验是否再次输入密码
···

对就是写主代码的时候， 就应该是两行解决的。

但是这是理想， 怎么实现呢。

我这样写

let checkArr = [
  ['pw', '请输入密码',],
  ['checkpws', 'pws', '两次输入的密码不一致'],
]
if(!Config.funcChecks(data, checkArr)())
  return
// 下一步操作了

OK， 解决了。

两个值的时候，第一个key属性， 第二个提示语
三个的时候， 第一个是校验函数， 第二个是key属性， 第三个是提示语

这里可能会问， 两次密码校验是怎么做到的， 你只有一个值。

比如上面的代码data可以这样写

let data = {
  pws: 密码1 + 分隔符 + 密码2
}

校验函数这样可以写

checkpws(str){
  return str.split(分隔符)[0] === str.split(分隔符)[1]
}

看下实际运用的代码：

---

funcChecks代码如下

funcChecks(data, arr){
        let jss = `() => {
            ${arr.map(e => {
                if(e.length == 2){
                    return `
                        if(!data['${e[0]}']){
                            Config.totast('${e[1]}')
                            return
                        }
                    `
                }
                if(e.length == 3){
                    return `
                        if(!${e[0]}(data['${e[1]}'])){
                            Config.totast('${e[2]}')
                            return
                        }
                    `
                }
            }).join('')}
            return true
        }`
        // console.log('jss')
        // console.log(jss)
        return eval(jss)
    }

看到这里大家可能会说， 你用eval是作弊， 性能不好， 不安全等等， 大家可以去看wind.js作者怎么说的。

然后最后是实时校验的问题， 这个的话， 可以二次封装到不同框架里面， 如果大家有需要， 我可以出一种框架的例子。

再见。

告辞

--END--