限制input输入特殊字符

问题所在：

如何限制用户输入特殊字符

解决方法：

首先存在两种情况
1.只提醒用户输入了特殊字符

第一种效果图.jpg
这种情况的话，我是用自定义校验规则实现的，举例：

var validateName = (rule, value, callback) => {
     if (value === '') {
       callback(new Error('请输入名称'));
     }
     // 刨除_ ，-，空格之后的特殊符号
     let newValue = value.replace(/[`~!@#$%^&*()\+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '');
     if(newValue!==value){
       callback(new Error('新建表单名称不可用特殊符号（ _，-，空格除外）'));
     }else{
       if(this.resourceNameList.indexOf(value)>-1){
         callback(new Error('该资源集名称已存在，请重新输入'));
       }else{
         callback();
       }
     }
   };
// 规则数组中的相关自定义验证
deviceNumber: [
         { required: true, validator: validateName, trigger: ['blur', 'change'] }
       ],

主要的思路就是，正则匹配，用空字符替换匹配到的特殊字符，如果value在替换之后还是和原字符串相同，那就证明当前名称合法，否则，说明名称包含了特殊字符，报错提醒用户。
包含所有特殊字符的写法：

let newValue = value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '').replace(/\s/g, "");

---

2.直接禁止输入特殊字符

<el-input
  :value="form.name"
  @input="e => form.name = validSe(e)"
></el-input>

validSe(value){
      value = value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '').replace(/\s/g, "");
      return value;
    },

当用户输入特殊字符时，input上直接不显示，只显示字母、数字、汉字。所以为了用户体验，最好还是给用户一个输入特殊字符的提示，这里感兴趣的可以自己实现一下。