欢迎光临
我的个人博客网站

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> 

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue全局解决限制input输入表情和特殊字符方案
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏