vue+element校验输入框不能有特殊字符

做管理后台的时候 遇到表单校验 要求是不能让用户输入特殊字符 简单三步即可 亲测有用

• 1. 在data() 函数处声明方法

export default {
  data() {
	let validateInput = (rule, value, callback) => {
	      if (!this.checkSpecialKey(value)) {
	        callback(new Error("不能含有特殊字符！！"));
	      } else {
	        callback();
	      }
	    };
	}
}

• 2. 在校验规则处加上一句代码 { validator: validateInput, trigger: “blur” },

     rules: {
        CheckTypeName: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          { validator: validateInput, trigger: "blur" },
        ],
      },

• 3. 在method中写特殊字符的方法

methods: {
	 // 校验输入框不能有特殊字符
    checkSpecialKey(str) {
      let specialKey =
        "[`~!#$^&*()=|{}':;'\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'";
      for (let i = 0; i < str.length; i++) {
        if (specialKey.indexOf(str.substr(i, 1)) != -1) {
          return false;
        }
      }
      return true;
    },
}

看效果

有问题告诉我哦