//va配置的構(gòu)造函數(shù)function VaConfig(type, typeVal, errMsg, name, tag){ this.type = type, this.typeVal = typeVal, this.errMsg = errMsg, this.name = name, this.tag = tag}

/** 流程： 綁定指令-> 設(shè)置配置(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 }}//校驗函數(shù)function check(v, conditions){ var res = 0;     //0代表OK, 若為數(shù)組代表是某個字段的錯誤 //驗證函數(shù) 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}重復(fù)` } //使用layer來報錯，如果需要自定義報錯方式，要把全文的layer集中起來包一層。 layer.msgWarn(ERR_MSG[type])}/** * [VaConfig va配置的構(gòu)造函數(shù)] * @param {[string]} type [校驗類型，如reg, limit等等] * @param {[*]} typeVal  [根據(jù)校驗類型配置的值] * @param {[string]} errMsg [報錯信息] * @param {[string]} name [用以ajax的字段名] * @param {[string]} tag [中文名，用以報錯] */function VaConfig(type, typeVal, errMsg, name, tag){ this.type = type, this.typeVal = typeVal, this.errMsg = errMsg, this.name = name, this.tag = tag}//用來剔除重復(fù)的規(guī)則，以及規(guī)則的覆蓋。默認后面的取代前面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 = []     //默認的校驗規(guī)則    --不用寫，默認存在的規(guī)則（如非空）  ,optionalConfig = []    //用戶選擇的配置成套  --與name相關(guān)  ,customConfig = []     //用戶自定義的規(guī)則（組件中） --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')  //傳給回調(diào)的參數(shù)   //如果允許為空的此時為空，不校驗   if(value === '' && option.canNull){   vm.vaVal[name] = value   return   }   vm.vaResult[name] = check(value, conditions);   var _result = vm.vaResult[name]   if(_result){   //如果返回的是字符串，則為自定義報錯； 如果是數(shù)組，則使用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)   //寫在實例內(nèi)部method的回調(diào)  })  }  //不能重復(fù)的  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對應(yīng)的，直接就加進optionalConfig  if(regList[name]){  optionalConfig.push(regNew(regList[name]))  }  //用戶自定義的規(guī)則  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])   }  })  }  //規(guī)則由 默認規(guī)則 + 修飾符規(guī)則 + 寫在屬性的自定義規(guī)則 + 用戶直接加到vm.vaConfig里的規(guī)則 合并（后面的同type規(guī)則會覆蓋前面的）  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){   //如果返回的是字符串，則為自定義報錯； 如果是數(shù)組，則使用showErr 報錯   typeof _result === 'string' ? layer.msgWarn(_result) : showErr(conditions[0].tag, _result)   return   }   vm.vaVal[name] = value  }  //校驗通過的回調(diào)  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){   //如果返回的是字符串，則為自定義報錯； 如果是數(shù)組，則使用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設(shè)置自定義配置 */ Vue.prototype.VaConfig = VaConfig}module.exports = va