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() {
8var reg = /[^u4E00-u9FA5|d|a-zA-Z|rns,.?!，。？！…—&$=()-+/*{}[]]|s/g
< = place(reg, '')
10      },
11    },
12  }
13 </script>
这样代码量⽐较⼤⽽且不好维护，所以我们需要⾃定义⼀个指令来解决这问题。
需求：根据正则表达式，设计⾃定义处理表单输⼊规则的指令，下⾯以禁⽌输⼊表情和特殊字符为例。
1 let findEle = (parent, type) => {
2return LowerCase() === type ? parent : parent.querySelector(type)
3 }
4
5 const trigger = (el, type) => {
6  const e = ateEvent('HTMLEvents')
7  e.initEvent(type, true, true)
8  el.dispatchEvent(e)
9 }
10
11 const emoji = {
12  bind: function (el, binding, vnode) {
13// 正则规则可根据需求⾃定义
14var regRule = /[^u4E00-u9FA5|d|a-zA-Z|rns,.?!，。？！…—&$=()-+/*{}[]]|s/g
15    let $inp = findEle(el, 'input')
16    el.$inp = $inp
input框禁止输入
17    $inp.handle = function () {
18      let val = $inp.value
19      $inp.value = place(regRule, '')
20
21      trigger($inp, 'input')
22    }
23    $inp.addEventListener('keyup', $inp.handle)
24  },
25  unbind: function (el) {
26    el.$veEventListener('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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。