element-ui中form驗證雜記

摘要： 最近接觸的商戶後臺專案居多，自然而然就涉及到了大量的表單驗證， 也就對一些常用的el-form表單驗證和問題進行下梳理。 當我們新增required驗證後，輸入一些資料後再刪除完時，會出現 xxx is required ，如下圖所示 你可能很納悶，已經為for...

最近接觸的商戶後臺專案居多，自然而然就涉及到了大量的表單驗證，

也就對一些常用的el-form表單驗證和問題進行下梳理。

當我們新增required驗證後，輸入一些資料後再刪除完時，會出現 xxx is required ，如下圖所示

你可能很納悶，已經為form表單傳入了rules了啊，在不全部刪除時，驗證規則都沒問題。這個問題是因為在html中使用了 required 欄位，而在rules的規則沒有設定 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: '角色名稱為必填項' }

這種情況下就會為輸入框新增一條預設驗證規則，就導致了上面圖片情況的發生。

為了解決這種情況，我們只需要把解除安裝html裡的 required 去除，並把他移動到rules的規則之中即可。

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

級聯提交表單驗證

對於一些複雜的表單，我們經常會遇到在提交前需要驗證多個表單的情況。

由於element的最後validate方法是非同步的。

如果每個表單都是相互獨立的話，我們沒必要同步的去驗證所有的表單。

因此可以將每個獨立的表單封裝成Promise，再使用Promise.all進行回撥處理。

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

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

巢狀屬性校驗

對於複雜表單，我們難免需要進行更深層級的驗證。

對於明確知道要驗證的巢狀屬性，可以在rules物件定義時，使用字串形式指定要驗證的屬性，同事在prop繫結相應值。

// 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'}]
},

對於在迴圈之中動態繫結的屬性，則需要進行動態的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'}]
},

這樣就能順利的繫結上我們需要的驗證規則。