1. 程式人生 > >vue+element中自定義表單校驗特殊字元

vue+element中自定義表單校驗特殊字元

本次專案基於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”] 表示在輸入和失去焦點的時候進行校驗。