el-input在vue中优雅实现禁止输入特殊字符

前提补充

在vue中

<input v-model="text" />

等价于

<input
 :value="text"
 @input="e => text = e.target.value"
/>

需求

前端提交form表单要求，不能输入 @#¥%……&*…
不是提示，而是 禁止输入

效果

代码

** 在mian.js中添加【vue原型上添加方法，便于全局使用】

Vue.prototype.validForbid = function (value, number = 255) {
  value = value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '').replace(/\s/g, "");
  if (value.length >= number) {
    this.$message({
      type: "warning",
      message: `输入内容不能超过${number}个字符`
    });
  }
  return value;
}

** 在component.vue中加入

<el-input
  :value="form.name"
  @input="e => form.name = validSe(e)"
  maxlength="10"
  placeholder="过滤特殊字符长度10"
>el-input>

over

听说你要在线测试⁉️ 那就点我?吧