Vue中 全局限制输入特殊字符

传送门：Vue实现自定义指令（directive）及应用场景

背景：开发中遇到的表单输入，常常会限制特殊字符的输入 以满足安全性测试的要求。

1. 单独处理每个文本框

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

这样每个输入框单独处理，工作量较大且不好维护，所以需要自定义一个指令来统一实现这一需求。

2. 自定义指令全局统一处理（推荐）

2.1 自定义限制输入特殊字符指令

// 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);
};

2.2 在 main.js 中引入该自定义组件

import '@/directives/emoji.js';

2.3 在组件中使用
在需要校验的输入框（多行文本框）加上 v-emoji 即可

<el-input 
  v-emoji
  v-model="content" 
  placeholder="请输入">
</el-input>