今天想做这么一个东西,给input加一个验证功能。本来是想让它依赖正则表达式时不时的纠错(可惜没搞定)。结果只能先模糊再验证,验证不通过再清零。听。它很简单,但是它很微妙并且很难编码。vuedirective.jsimportVuefrom'vue'constvalidate={'手机号码':function(s){return/^1[0-9]{10}$/.test(s)}}Vue.directive('validate',{bind:function(el,binding,vnode){constkey=binding.valueconstisMobile=validate[key]el.addEventListener('blur',function(){if(!isMobile(this.value)){this.value=''el.dispatchEvent(newEvent('input'))//这是画龙点睛alert(`${key}formatisincorrect`)}})}})如果你没有写这句话el.dispatchEvent(newEvent('input'))就写这个。value=''虽然页面效果有了,但是数据中定义的mobile并没有改变,那为什么写这句el.dispatchEvent(newEvent('input'))就可以改变数据中定义的mobile呢?原因是因为v-model是一个语法糖上面两句是等价的,所以如果要真正改变data中定义的mobile,需要手动触发input事件来执行这个mobile=$event.target.value要真实基本就是这个效果