Vue指令-禁止输入特殊字符

进击的你

已于 2022-03-02 10:39:54 修改

阅读量2.5k

点赞数 1

分类专栏：前端问题文章标签： vue.js elementui javascript

于 2022-03-02 10:39:21 首次发布

本文链接：https://blog.youkuaiyun.com/zxcv19961204/article/details/123224227

版权

前端问题专栏收录该内容

51 篇文章

订阅专栏

本文介绍了如何使用Vue自定义指令`disable-synmol`来优雅地禁止输入框输入特殊字符。通过正则表达式匹配并替换输入值，确保输入内容符合规范。同时，通过监听keyup事件并触发input事件，实现了双向数据绑定的实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍：无入侵的输入检测，感觉是比较优雅的解决问题

关键点：

1.正则要写对，正则匹配的值需确认无误

2.重新触发双向绑定的方式

import Vue from 'vue'
// 禁止输入特殊字符
Vue.directive('disable-synmol', {
    bind: function (el, binding, vnode) {
        // 正则规则可根据需求自定义
        //  /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/im;
        const regRule = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/im
        let $inp = findEle(el, 'input')
        el.$inp = $inp
        $inp.handle = function (event) {
            let val = $inp.value
            $inp.value = val.replace(regRule, '')
            // event.target.value = $inp.value
            // binding.value = $inp.value
            // this.value = $inp.value
            // console.info('disable-synmol $inp', $inp)
            // console.info('disable-synmol $inp.value ', $inp.value)
            // console.info('disable-synmol binding', binding)

            //调用input事件使vue v-model绑定更新
            // $inp.dispatchEvent(new Event('input'))
            // event.target.dispatchEvent(new Event('input'))
            trigger($inp, 'input')
        }
        $inp.addEventListener('keyup', $inp.handle)
    },
    unbind: function (el) {
        el.$inp.removeEventListener('keyup', el.$inp.handle)
    }
})

const findEle = (parent, type) => {
    return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)
}

const trigger = (el, type) => {
    const e = document.createEvent('HTMLEvents')
    e.initEvent(type, true, true)
    el.dispatchEvent(e)
}

参考资料：

Vue全局解决限制input输入表情和特殊字符方案 - 梓鹏 - 博客园

input输入框限制输入特殊字符_Small_Pang的博客-优快云博客

Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入 - 两轮明月 - 博客园