Vue全局解决限制input输入表情和特殊字符方案

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

我们常规方法是在每一个表单的 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>