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

vue+element校验输入框不能有特殊字符做管理后台的时候遇到表单校验要求是不能让用户输入特殊字符简单散步即可亲测有用在data() 函数处声明方法export default {data() {let validateInput = (rule, value, callback) => {if (!this.checkSpecialKey(value)) {callback(n

洪洪呀

6397人浏览 · 2021-09-24 14:27:40

洪洪呀 · 2021-09-24 14:27:40 发布

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

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

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

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

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

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

1. 在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;
    },
}