引子：由于在工作中开发App用uni-app组件外部ui组件可能会导致包的体积过大，所以不让用。都是自己手写的规则，大大拖延了工作效率，于是前几天想能不能自己写一个高复用的校验表单方法，可支持自定义信息和像element-ui里一样支持多重校验规则的callback
思路
我当时是这样想的，我定义一个方法，你给我传入两个参数，一个参数是表单信息，另一个参数是自定义信息序列。我内部根据表单信息来遍历，然后通过返回bool值来判断你此次校验有没有通过，然后把对应的自定义信息也返回出去，至于怎么显示你自己定规则了，毕竟框架不同显示方法也不同。在uni-app中可以使用uni.showToast（）在原生中可以自己操作dom显示。业务场景不同所以内部做不了显示只能你们使用方法的人自己来
代码部分
function rules(formObj,msgAry){
//获取所有formObj的所有key
const keys = Object.keys(formObj);
for(let key in formObj){
if(!formObj[key]){
const keyInd = keys.findIndex(item => item == key);
return [false,msgAry[keyInd]];
}
}
return [true,''];
}
这是最初始的只支持自定义信息，其思路首先获取表单信息里面所有的可枚举的key，然后循环表单信息，如果对应项等于空的话或者一些列可以隐式转为false的都i会走里面的代码块，然后查找key数组里的当前key对应的下标，返回出去一个对象，第一项是bool，第二项就是传进来的自定义消息数组里的对应项
错误处理
错误处理这个我当时想着其实我这个只是做校验我的两个参数对应的就必须是表单对象和自定义消息队列
我是这样做校验的
如果传入的不是对象或数组，直接向外抛出错误信息，如果为空的话则直接返回错误，不报错如果参数正确没问题的话就直接返回true用于后续程序流程走向
rules添加错误处理机制
function rules(formObj,msgAry){
const typeArr = MsgError.typError(formObj,msgAry);
// 判断是否是空表单数据或者空消息队列
if(!typeArr[0]) return typeArr
//获取所有formObj的所有key
const keys = Object.keys(formObj);
for(let key in formObj){
if(!formObj[key]){
const keyInd = keys.findIndex(item => item == key);
return [false,msgAry[keyInd]];
}
}
return [true,''];
}
至此一个简单的表单校验方法就完成了但是思考了一下它很不灵活不能根据自定义表单校验来显示不同的提示信息这样肯定不行的啊，于是我就想到了能不能和element-ui一样支持传递callback，因为我平时写后台啥的都是用的这个。思考了一下其实是可行的
思路
我想的是我的消息队列里面定义了自定义信息那我是不是可以在自定义信息队列里传一个callback呢，然后我循环这个消息队列来判断它那些是自定义信息那些是callback
所以我定义了一个方法用来专门获取消息队列里所有callback的下标集成于一个数组
这里面的msgIndAry就是所有自定义callback的下标集合了
最终的rules函数
思路
每个人的实现方法和思路都是不一样的
我当时想的思路是在循环表单信息里先从callback下标集合里能不能查到对应的下标，如果能查到说明当前项就是一个自定义callback如果查不到就是一个自定义信息
如果是callback的话就拿着下标取出消息队列里的方法传一个值，这个值就是对应表单信息里的数据，因为这个自定义callback肯定是要根据值来判断怎么走校验规则的，要传给外面
然后执行完毕后跳出循环，执行下一次循环，如果最后没问题就返回true如果有问题就返回false和消息队列信息
用法
这样子用至于自定义callback
如果其内部不需要验证的话目前只能支持自定义callback然后返回true来逃避其内部校验机制
github仓库地址
如果觉得有帮助可以点一个免费的star谢谢啦😁
