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

最新推荐文章于 2023-11-21 15:19:23 发布

洪洪呀

最新推荐文章于 2023-11-21 15:19:23 发布

阅读量6.2k

点赞数 4

分类专栏： web前端 vue 文章标签： vue.js javascript html

本文链接：https://blog.youkuaiyun.com/H_hongai/article/details/120454119

版权

web前端同时被 2 个专栏收录

22 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

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;
    },
}