快捷導(dǎo)航

詳解element-ui中form驗(yàn)證雜記

更新時(shí)間：2019年03月04日 14:26:43 作者：Fiend

這篇文章主要介紹了詳解element-ui中form驗(yàn)證雜記，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

最近接觸的商戶后臺項(xiàng)目居多，自然而然就涉及到了大量的表單驗(yàn)證，

也就對一些常用的el-form表單驗(yàn)證和問題進(jìn)行下梳理。

當(dāng)我們添加required驗(yàn)證后，輸入一些數(shù)據(jù)后再刪除完時(shí)，會出現(xiàn)xxx is required，如下圖所示

你可能很納悶，已經(jīng)為form表單傳入了rules了啊，在不全部刪除時(shí)，驗(yàn)證規(guī)則都沒問題。這個(gè)問題是因?yàn)樵趆tml中使用了required字段，而在rules的規(guī)則沒有設(shè)置required為true，

// html
<el-form-item label="角色名稱" required prop="roleName">
 <el-input v-model="params.roleName"></el-input>  
</el-form-item>

// js
{ trigger: 'blur', message: '角色名稱為必填項(xiàng)' }

這種情況下就會為輸入框添加一條默認(rèn)驗(yàn)證規(guī)則，就導(dǎo)致了上面圖片情況的發(fā)生。

為了解決這種情況，我們只需要把卸載html里的required去除，并把他移動到rules的規(guī)則之中即可。

// js
{ required: true, trigger: 'blur', message: '角色名稱為必填項(xiàng)' }

級聯(lián)提交表單驗(yàn)證

對于一些復(fù)雜的表單，我們經(jīng)常會遇到在提交前需要驗(yàn)證多個(gè)表單的情況。

由于element的最后validate方法是異步的。

如果每個(gè)表單都是相互獨(dú)立的話，我們沒必要同步的去驗(yàn)證所有的表單。

因此可以將每個(gè)獨(dú)立的表單封裝成Promise，再使用Promise.all進(jìn)行回調(diào)處理。

可以參考下面使用了async/await的vue代碼。

// 進(jìn)行異步表單驗(yàn)證
async validateData () {
 this.formValidatePromiseArr = []
 this.formList.map((form, index) => {
  this.validateEachForm(form, `form${index}`)
 })
 // 如果沒有全部驗(yàn)證成功，則進(jìn)入捕獲的錯(cuò)誤處理
 try {
  await Promise.all(this.formValidatePromiseArr)
  console.log('finish')
  this.next()
 } catch (error) {
  console.log(error)
 }
},
// 校驗(yàn)每個(gè)獨(dú)立表單數(shù)據(jù)
validateEachForm (form, name) {
 let formResult = new Promise((resolve, reject) => {
  // 利用ref取到要驗(yàn)證的表單
  this.$refs[name][0].validate((valid) => {
   if (valid) {
    resolve()
   } else {
    console.log(`${name}的數(shù)據(jù)不完整`)
    reject()
   }
  })
 })
 this.formValidatePromiseArr.push(formResult)
}

嵌套屬性校驗(yàn)

對于復(fù)雜表單，我們難免需要進(jìn)行更深層級的驗(yàn)證。

對于明確知道要驗(yàn)證的嵌套屬性，可以在rules對象定義時(shí)，使用字符串形式指定要驗(yàn)證的屬性，同事在prop綁定相應(yīng)值。

// html
<el-form-item label="年齡信息" prop="info.age">
 <el-input v-model="form.info.age"></el-input>  
</el-form-item>

// js
rules: {
 name: [{required: true, trigger: 'blur', message: 'required'}],
 'info.age': [{required: true, trigger: 'blur', message: 'required'}]
},

對于在循環(huán)之中動態(tài)綁定的屬性，則需要進(jìn)行動態(tài)的prop綁定(必須是字符串形式的屬性取值)，再綁定指定的rules，例如

// html
<div v-for="info in form.infoList">
 <el-form-item label="年齡信息" :prop="`infoList[${index}].age`" :rules="rules.age">
  <el-input v-model="info.age"></el-input>  
 </el-form-item>
</div>

// js
rules: {
 age: [{required: true, trigger: 'blur', message: 'required'}]
},

這樣就能順利的綁定上我們需要的驗(yàn)證規(guī)則。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: