vue+element中自定义表单校验特殊字符

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/nongweiyilady/article/details/82813225

本次项目基于vue和element-ui，需要在前端用户输入的时候去校验输入的内容中是否含有特殊符号，如果有，则提示用户不支持输入特殊符号。

校验规则方法

export function checkSpecificKey(str) {
  var specialKey = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'"; 
  for (var i = 0; i < str.length; i++) {
    if (specialKey.indexOf(str.substr(i, 1)) != -1) {
      return false;
    }
  }
  return true;
}

参数传入一个需要校验的字符串，specialKey是特殊符号集合，可自定义增减。使用substr方法，将传入的str拆分成一个一个char，然后用indexOf方法判断specialKey集合中是否包含这个char，如果包含，则说明包含特殊字符。

vue文件中使用

  data() {
    var validateInput = (rule, value, callback) => {
      if (!checkSpecificKey(value)) {
        callback(new Error("Special symbols are not supported"));
      } else {
        callback();
      }
    };
    return {
    form: {
        code: ""
      },
      rules: {
        code: [
          {
            required: true,
            message: "code can not be empty",
            trigger: "blur"
          },
          { validator: validateInput, trigger: ["blur", "change"] }
        ]
      }
   }
}

• 其中，validateInput方法为我们自定义的校验。
• 当checkSpecificKey返回false时，使用 callback(new Error(“Special symbols are not supported”));抛出错误，此时在输入框下方会显示Special symbols are not supported错误提示；
• 假如checkSpecificKey返回true，则callback回调，callback中为空，校验通过。
• trigger: [“blur”, “change”] 表示在输入和失去焦点的时候进行校验。