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)
5 const trigger = (el, type) => {
6 const e = document.createEvent('HTMLEvents')
7 e.initEvent(type, true, true)
8 el.dispatchEvent(e)
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, '')
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 }
30 export default emoji
使用：将需要校验的输入框加上
v-emoji
即可
1
<template>
2
<input type="text" v-model="note" v-emoji />
3
</template>
