背景：开发中遇到的表单输入，往往会有对输入内容的限制，比如不能输入表情和特殊字符，只能输入数字或字母等。

我们常规方法是在每一个表单的 on-change 事件上做处理。

 1  2    3  4  5 default { 6     methods: { 7       vaidateEmoji() { 8         var reg = /[^u4E00-u9FA5|d|a-zA-Z|rns,.?!，。？！…—&$=()-+/*{}[]]|s/g 9         this.note = this.note.replace(reg, '')10       },11     },12   } 
13 " _ue_custom_node_="true">

这样代码量比较大而且不好维护，所以我们需要自定义一个指令来解决这问题。

需求：根据正则表达式，设计自定义处理表单输入规则的指令，下面以禁止输入表情和特殊字符为例。

 1 let findEle = (parent, type) => { 2   return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type) 3 } 4  5 const trigger = (el, type) => { 6   const e = document.createEvent('HTMLEvents') 7   e.initEvent(type, true, true) 8   el.dispatchEvent(e) 9 }10 11 const emoji = {12   bind: function (el, binding, vnode) {13     // 正则规则可根据需求自定义14     var regRule = /[^u4E00-u9FA5|d|a-zA-Z|rns,.?!，。？！…—&$=()-+/*{}[]]|s/g15     let $inp = findEle(el, 'input')16     el.$inp = $inp17     $inp.handle = function () {18       let val = $inp.value19       $inp.value = val.replace(regRule, '')20 21       trigger($inp, 'input')22     }23     $inp.addEventListener('keyup', $inp.handle)24   },25   unbind: function (el) {26     el.$inp.removeEventListener('keyup', el.$inp.handle)27   },28 }29 30 export default emoji

使用：将需要校验的输入框加上 v-emoji 即可

1