- A+
所属分类：Web前端
背景：开发中遇到的表单输入，往往会有对输入内容的限制，比如不能输入表情和特殊字符，只能输入数字或字母等。
我们常规方法是在每一个表单的 on-change 事件上做处理。
1 <template> 2 <input type="text" v-model="note" @change="vaidateEmoji" /> 3 </template> 4 5 <script> export 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 </script>
这样代码量比较大而且不好维护，所以我们需要自定义一个指令来解决这问题。
需求：根据正则表达式，设计自定义处理表单输入规则的指令，下面以禁止输入表情和特殊字符为例。
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/g 15 let $inp = findEle(el, 'input') 16 el.$inp = $inp 17 $inp.handle = function () { 18 let val = $inp.value 19 $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 <template> 2 <input type="text" v-model="note" v-emoji /> 3 </template>
