Restringir globalmente la entrada de caracteres especiales en Vue

Portal: Vue implementa instrucciones personalizadas (directivas) y escenarios de aplicación

Antecedentes: la entrada de formularios que se encuentra en el desarrollo a menudo restringe la entrada de caracteres especiales para cumplir con los requisitos de las pruebas de seguridad.

1. Procese cada cuadro de texto individualmente

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

De esta manera, cada cuadro de entrada se procesa por separado y la carga de trabajo es pesada y difícil de mantener, por lo que es necesario personalizar un comando para cumplir este requisito de manera uniforme.

2. Procesamiento global unificado de comandos personalizados (recomendado)

2.1 Límite personalizado de entrada de comandos de caracteres especiales

// 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 Introducir el componente personalizado en main.js

import '@/directives/emoji.js';

2.3 Uso en componentes
Simplemente agregue v-emoji al cuadro de entrada (cuadro de texto de varias líneas) que debe verificarse

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