快捷導(dǎo)航

element表單使用校驗(yàn)之校驗(yàn)失效問(wèn)題詳解

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

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

<el-form ref="form" :model="form" :rules="rules" label-width="80px">
  <el-form-item label="名稱(chēng)" 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>

第一種可能的錯(cuò)誤：字段錯(cuò)誤

其中的每個(gè) el-form-item 標(biāo)簽中，都有一個(gè) prop ，其中的值是我們 rules 對(duì)象中的某個(gè) 屬性。

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

比如我們的字段是 userName，我們的prop還是name時(shí)，校驗(yàn)失效

  <el-form-item label="名稱(chēng)" prop="name">
    <el-input v-model="form.userName"></el-input>
  </el-form-item>

再來(lái)看js中的代碼：

form: {
  name: undefined,
  sex: undefined,
  age: undefined
},
rules: {
    name: [
          { required: true, message: "用戶(hù)名稱(chēng)不能為空", trigger: "blur" },
          { min: 2, max: 20, message: '用戶(hù)名稱(chēng)長(zhǎng)度必須介于 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ā)校驗(yàn)錯(cuò)誤

rules 中每個(gè)校驗(yàn)對(duì)象都有一項(xiàng) trigger 是檢驗(yàn)觸發(fā)的方式

對(duì) el-input 輸入框的驗(yàn)證，trigger的值選blur，即失去焦點(diǎn)時(shí)進(jìn)行驗(yàn)證。

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

沒(méi)有任何輸入的時(shí)候，不會(huì)觸發(fā) change ，但一定會(huì)觸發(fā) blur 事件

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

方法名	說(shuō)明	參數(shù)
validateField	對(duì)部分表單字段進(jìn)行校驗(yàn)的方法	Function(props: array \| string, callback: Function(errorMessage: string))

this.$refs.表單ref名稱(chēng).validateField(校驗(yàn)字段);

validator

最后提一下自定義校驗(yàn)，用于一些校驗(yàn)一些復(fù)雜的值

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

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

直接看代碼

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: "請(qǐng)?jiān)俅屋斎胄旅? },
          { required: true, validator: name, trigger: "blur" }
        ]
    }
  }