我们做项目的时候，经常一个根组件上挂着N个子组件，子组件上又可能挂着N个子组件。vnode.context获取的实例，是绑定该指令的组件的实例。这个就相当好用了。你可以做很多事情
当然还用了点Vue.prototype
Vue.prototype.$method 就是可以在各个组件上调用的方法。可以在组件内部用 this.$method调用的
## 三、具体实现的思路 ##
核心思路如下图：
规则的构造函数
//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 [中文名，用以报错] */ 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 报错 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){ //如果返回的是字符串，则为自定义报错； 如果是数组，则使用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
现在项目已经用起来了。当然表单验证这种是高度定制化的。纯粹分享个过程和思路。也算我这个vue新手的一次阶段性成果吧。哈哈~
使用实例
第一个框，加了两条指令