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

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

function VaConfig(type, typeVal, errMsg, name, tag){
this.type = type, this.typeVal = typeVal, this.errMsg = errMsg, this.name = name, 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,16}$/,
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, typeVal, '', name, tag)}
var regNew = (typeVal) =>{return new VaConfig('reg', typeVal, regMsg, name, 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 报错