Vue中全局限制输入特殊字符方式
作者：明天也要努力
这篇文章主要介绍了Vue中全局限制输入特殊字符方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue全局限制输入特殊字符
背景：
开发中遇到的表单输入，常常会限制特殊字符的输入 以满足安全性测试的要求。
单独处理每个文本框
<template>
<el-input
v-model="content"
placeholder="请输入"
@change="vaidateEmoji">
</el-input>
</template>
<script>
export default {
methods: {
vaidateEmoji() {
const regRule = /[`~^!@#$€£₤%^&*()_\-+=<>?:"{}|.\/;'\\[\]·~！……@#￥¥%*（）\-+={}|《》？：“”【】‘']/im;
this.content = this.content.replace(regRule, '');
},
},
}
</script>
这样每个输入框单独处理，工作量较大且不好维护，所以需要自定义一个指令来统一实现这一需求。
自定义指令全局统一处理（推荐）
- 自定义限制输入特殊字符指令
// emoji.js
import Vue from 'vue';
// 禁止输入特殊字符
Vue.directive('emoji', {
bind: function (el, binding, vnode) {
// 正则规则可根据需求自定义
const regRule = /[`~^!@#$€£₤%^&*()_\-+=<>?:"{}|.\/;'\\[\]·~！……@#￥¥%*（）\-+={}|《》？：“”【】‘']/im;
let $inp = findEle(el, 'input') || findEle(el, 'textarea');
el.$inp = $inp;
$inp.handle = function (event) {
let val = $inp.value;
$inp.value = val.replace(regRule, '');
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);
};
- 在 main.js 中引入该自定义组件
import '@/directives/emoji.js';
- 在组件中使用
在需要校验的输入框（多行文本框）加上 v-emoji 即可
<el-input v-emoji v-model="content" placeholder="请输入"> </el-input>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。