element表單使用校驗之校驗失效問題詳解

更新時間：2022年10月17日 16:38:16 作者：paidaboluo

最近工作中遇到了element表單校驗失敗的情況,通過查找相關資料終于解決了,所以下面這篇文章主要給大家介紹了關于element表單使用校驗之校驗失效問題的相關資料,需要的朋友可以參考下

<el-form ref="form" :model="form" :rules="rules" label-width="80px">
  <el-form-item label="名稱" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="性別" prop="sex">
    <el-input v-model="form.sex"></el-input>
  </el-form-item>
  <el-form-item label="年齡" prop="age">
    <el-input v-model="form.age"></el-input>
  </el-form-item>
</el-form>

第一種可能的錯誤：字段錯誤

其中的每個 el-form-item 標簽中，都有一個 prop ，其中的值是我們 rules 對象中的某個屬性。

然后我們 v-model 綁定的值也必須是這個屬性

比如我們的字段是 userName，我們的prop還是name時，校驗失效

  <el-form-item label="名稱" prop="name">
    <el-input v-model="form.userName"></el-input>
  </el-form-item>

再來看js中的代碼：

form: {
  name: undefined,
  sex: undefined,
  age: undefined
},
rules: {
    name: [
          { required: true, message: "用戶名稱不能為空", trigger: "blur" },
          { min: 2, max: 20, message: '用戶名稱長度必須介于 2 和 20 之間', trigger: 'blur' }
        ],
    sex: [
          { required: true, message: "性別不能為空", trigger: "blur" }
        ],
    age: [
          { required: true, message: "年齡不能為空", trigger: "blur" },
          { pattern: /^([0-9]|[1-9]\d|[1-9]\d\d)$/, message: '年齡介于 0-999 之間', trigger: 'blur' }
        ]
}

第二種：觸發(fā)校驗錯誤

rules 中每個校驗對象都有一項 trigger 是檢驗觸發(fā)的方式

對 el-input 輸入框的驗證，trigger的值選blur，即失去焦點時進行驗證。

下拉框 el-select、日期選擇器 el-date-picker、復選框 el-checkbox、單選框 el-radio驗證時，trigger的值選擇change，即當值發(fā)生變化時就進行驗證。

沒有任何輸入的時候，不會觸發(fā) change ，但一定會觸發(fā) blur 事件

注：如果使用了其他的組件（非ele組件等），組件中沒有 v-model 等等情況時，值改變時需要我們手動去觸發(fā)校驗

方法名	說明	參數
validateField	對部分表單字段進行校驗的方法	Function(props: array \| string, callback: Function(errorMessage: string))

this.$refs.表單ref名稱.validateField(校驗字段);

validator

最后提一下自定義校驗，用于一些校驗一些復雜的值

validator的參數有：(rule, value, callback)，前三個比較重要。

rule：指向該條規(guī)則對象。
value：新的值，用于參與運算、對比。
callback：執(zhí)行回調，使用方法是：callback('...');。
- 如果不傳參：表示驗證通過，一般不必專門強調。
- 如果傳入值：字符串會作為錯誤提示，但是顯示優(yōu)先級低于外層的message。比如callback('內層錯誤提示');跟message: '外層錯誤提示'同時存在，則會提示：外層錯誤提示。

直接看代碼

data(){
  const name = (rule, value, callback) => {
    console.log(rule)
    console.log(value)
    console.log(callback)
    if (this.oldName === value) {
      callback(new Error("新名字不能和舊名字一致"));
    } else {
      callback();
    }
  };
  return {
    rules: {
        name: [
          { required: true, trigger: "blur", message: "請再次輸入新名字" },
          { required: true, validator: name, trigger: "blur" }
        ]
    }
  }