Vue表单验证插件的制作过程

一、表单验证模块的构成

任何表单验证模块都是由 配置――校验――报错――取值 这几部分构成的。

配置： 配置规则 和配置报错，以及优先级
校验： 有在 change 事件校验， 在点击提交按钮的时候校验， 当然也有在input事件取值的
报错： 报错方式一般要分，报错的文字有模板，也有自定义的
取值： 将通过验证的数据返还给开发者调用

下面是我老大针对公司项目给我提出的要求

集中式的管理 校验规则 和 报错模板。
报错时机可选
校验正确后的数据，已经打包成对象，可以直接用
允许各个页面对规则进行覆盖，对报错信息进行自定义修改，以及允许ajax获取数据后，再对规则进行补充
按顺序来校验，在第一个报错的框弹出错误

规则的构造函数

//va配置的构造函数
function VaConfig(type, typeVal, errMsg, name, tag){
this.type = type, this.typeVal = typeVal, this.errMsg = errMsg, this.name = name, this.tag = tag
}
type: nonvoid(非空), reg(正则), limit(区间), equal(与某个input相等)，unique(不能相同)
typeVal: 根据不同type设置不同的值
errMsg: 自定义的报错信息
name: 用来传ajax的字段，如Password, Username
tag：用来报错的名字，如‘银行账号'，‘姓名'

设置了三种规则
1.默认规则： 只要绑定指令，就默认有的校验。 比如非空的校验。 可以额外加修饰符来去除
2.选项规则： 通过Vue指令的修饰符添加的规则。
3.自定义规则： Vue指令属性值上添加的规则。
同一个type的规则只存在一个，也就是说，如果type为reg(正则),那么会互相覆盖。
覆盖的优先级： 自定义规则 > 选项规则 > 默认规则

思路讲的多了。也不知道怎么讲了，下面大家直接看源码把。

源码

/*
* 流程： 绑定指令-> 设置配置(vaConfig) -> 校验(check) -> 报错(showErr) 或 自定义报错
*/
var va = {};
function unique(arr){
var hashTable = {}, newArr = [];
for(var i = 0;i < arr.length;i++){
if(!hashTable[arr[i]]){
hashTable[arr[i]] = true;
newArr.push(arr[i]);
}
}
return newArr;
}
function addClass(dom, _class){
var hasClass = !!dom.className.match(new RegExp('(\\s|^)' + _class + '(\\s|$)'))
if(!hasClass){
dom.className += ' ' + _class
}
}
//校验函数
function check(v, conditions){
var res = 0; //0代表OK, 若为数组代表是某个字段的错误
//验证函数
var cfg = {
//非空
nonvoid: (v, bool)=>{
if(bool){
return v.trim() ? 0 : ['nonvoid'];
}else{
return 0;
}
},
reg:(v, reg)=> reg.test(v) ? 0 : ['reg'], //正则
limit:(v, interval)=> (+v >= interval[0] && +v <= interval[1]) ? 0 : ['limit', interval],
equal: (v, target)=>{ //和什么相等
var _list = document.getElementsByName(target), _target
for(var i = 0;i < _list.length;i++){
if(_list[i].className.indexOf('va') > -1){
_target = _list[i];
}
}
return (_target.value === v) ? 0 : ['equal', _target.getAttribute('tag')]
},
unique:(v)=>{
var _list = document.getElementsByClassName('unique'),
valList = [].map.call(_list, item=>item.value)
return (unique(valList).length === valList.length) ? 0 : ['unique']
}
}
for(var i = 0;i < conditions.length;i++){
var condi = conditions[i],
type = condi.type,
typeVal = condi.typeVal
res = cfg[type](v, typeVal)
// console.log(res, v, type,typeVal)
//如果有自定义报错信息， 返回自定义的报错信息
console.log(res)
if(res){
res = condi.errMsg || res
break
}
}
return res;
}
function 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}重复`
}
//使用layer来报错，如果需要自定义报错方式，要把全文的layer集中起来包一层。
layer.msgWarn(ERR_MSG[type])
}
/**
* [VaConfig va配置的构造函数]
* @param {[string]} type [校验类型，如reg, limit等等]
* @param {[*]} typeVal [根据校验类型配置的值]
* @param {[string]} errMsg [报错信息]
* @param {[string]} name [用以ajax的字段名]
* @param {[string]} tag [中文名，用以报错]
*/