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

2020-06-13 10:31:59易采站长站整理

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', {
bind:function(el, binding, 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, binding, vnode){
var vm = vnode.context
el.addEventListener('click', function(){
vm.vaResult || (vm.vaResult = {})
vm.vaVal || (vm.vaVal = {})

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

var _result = check(value, conditions)
//如果返回不为0,则有报错
console.log(_result)
if(_result){