• 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> 

  • 相关阅读:
    阅读笔记
    学习小记
    networkx学习笔记
    ORM查询简化
    redis等缓存
    redis相关缓存知识
    Centos7网络配置
    redis安装详细
    redis安装详细
    mobaxterm使用手册
  • 原文地址:https://www.cnblogs.com/cswzp/p/14153851.html
Copyright © 2020-2023  润新知