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

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 = cfgtype
// 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 [中文名，用以报错]
  */
  function VaConfig(type,this.tag = tag
  }
  //用来剔除重复的规则，以及规则的覆盖。默认后面的取代前面
  Array.prototype.uConcat = function(arr){
  var comb = this.concat(arr),unique = {},result = []

for(var i = 0;i < comb.length;i++){
// console.log(i,comb[i])
var type = comb[i].type
if(unique[type]){
var index = unique[type].index
unique[type] = comb[i]
unique[type].index = index;
}else{
unique[type] = comb[i]
unique[type].index = i;
}
}

for(var i= 0;i < 100;i++){
for(var item in unique){
if(unique[item].index === i){
delete unique[item].index
result.push(unique[item])
}
}
}
return result
}

//正则表
var regList = {
ImgCode: /^[0-9a-zA-Z]{4}$/,SmsCode: /^d{4}$/,MailCode: /^d{4}$/,UserName: /^[w|d]{4,16}$/,Password: /^[w!@#$%^&.]{6,Mobile: /^1[3|5|8]d{9}$/,RealName: /^[u4e00-u9fa5 ]{2,10}$/,BankNum: /^d{10,19}$/,Money: /^([1-9]d|0)$/,Answer: /^S+$/,Mail: /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/
}

va.install = function(Vue,options){
Vue.directive('va',{
bind:function(el,binding,vnode){
var vm = vnode.context,name = binding.arg === 'EXTEND' ? el.getAttribute('name') : binding.arg,tag = el.getAttribute('tag'),baseCfg = [] //默认的校验规则 --不用写，默认存在的规则（如非空）,optionalConfig = [] //用户选择的配置成套 --与name相关,customConfig = [] //用户自定义的规则（组件中） --bingding.value,option = binding.modifiers,regMsg = el.getAttribute('regMsg') || ''

var eazyNew = (type,typeVal) =>{return new VaConfig(type,'',tag)}
var regNew = (typeVal) =>{return new VaConfig('reg',regMsg,tag)} //正则的新建

el.className = 'va' + vm._uid
el.name = name

vm.vaConfig || (vm.vaConfig = {})
var NON_VOID = eazyNew('nonvoid',true)

//默认非空,如果加了canNull的修饰符就允许为空
if(!option.canNull){
baseCfg.push(NON_VOID)
}

//需要立即校验的框
if(option.vanow){
el.addEventListener('change',function(){
vm.vaResult || (vm.vaResult = {})
vm.vaVal || (vm.vaVal = {})
var value = el.value,conditions = vm.vaConfig[name],para = el.getAttribute('va-para') //传给回调的参数

//如果允许为空的此时为空，不校验
if(value === '' && option.canNull){
vm.vaVal[name] = value
return
}

vm.vaResult[name] = check(value,conditions);
var _result = vm.vaResult[name]
if(_result){
//如果返回的是字符串，则为自定义报错； 如果是数组，则使用showErr 报错
typeof _result === 'string' ? layer.msgWarn(_result) : showErr(conditions[0].tag,_result)
el.value = vm.vaVal[name] = ''
return
}
vm.vaVal[name] = value
vm.$vanow(para) //写在实例内部method的回调
})
}

//不能重复的
if(option.unique){
optionalConfig.push(eazyNew('unique',name))
}

//如果有在正则表里
var regOptions = Object.keys(option);
for(var i = 0;i < regOptions.length;i++){
var regOption = regOptions[i]
if(regList[regOptions[i]]){
optionalConfig.push(regNew(regList[regOption]))
}
}

//如果regList里有name对应的，直接就加进optionalConfig
if(regList[name]){
optionalConfig.push(regNew(regList[name]))
}

//用户自定义的规则
if(binding.value){
customConfig = binding.value.map(item=>{
let type = Object.keys(item)[0];
if(type === 'reg'){
return regNew(item[type])
}else{
if(type === 'unique'){
addClass(el,'unique')
}
return eazyNew(type,item[type])
}
})
}

//规则由 默认规则 + 修饰符规则 + 写在属性的自定义规则 + 用户直接加到vm.vaConfig里的规则 合并（后面的同type规则会覆盖前面的）
vm.vaConfig[name] || (vm.vaConfig[name] = [])
vm.vaConfig[name] = baseCfg.uConcat(optionalConfig).uConcat(customConfig).uConcat(vm.vaConfig[name])
},})

Vue.directive('va-check',vnode){
var vm = vnode.context
el.addEventListener('click',function(){
var domList = document.getElementsByClassName('va' + vm._uid);
vm.vaResult || (vm.vaResult = {})
vm.vaVal || (vm.vaVal = {})

for(var i = 0;i < domList.length;i++){
var dom = domList[i],name = dom.name,value = dom.value,conditions = vm.vaConfig[name]

var _result = check(value,conditions)
//如果返回不为0,则有报错
if(_result){
//如果返回的是字符串，则为自定义报错； 如果是数组，则使用showErr 报错
typeof _result === 'string' ? layer.msgWarn(_result) : showErr(conditions[0].tag,_result)
return
}
vm.vaVal[name] = value
}
//校验通过的回调
vm.$vaSubmit()
// layer.msgWarn('全部校验成功')
console.log(vm.vaVal)
})

}
})

Vue.directive('va-test',{
bind: function(el,function(){
vm.vaResult || (vm.vaResult = {})
vm.vaVal || (vm.vaVal = {})

var dom = document.getElementsByName(binding.arg)[0],conditions = vm.vaConfig[name]

var _result = check(value,conditions)
//如果返回不为0，则有报错
console.log(_result)
if(_result){
//如果返回的是字符串，则为自定义报错； 如果是数组，则使用showErr 报错
typeof _result === 'string' ? layer.msgWarn(_result) : showErr(conditions[0].tag,_result)
return
}

vm.vaVal[name] = value
var callback = Object.keys(binding.modifiers)[0]
vm[callback]()
})
}
})

/
在实例的monuted周期使用 api设置自定义配置
*/
Vue.prototype.VaConfig = VaConfig
}

module.exports = va