溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
嵌套對象的校驗
項目中使用的vue+elementUI進行開發，已經用了有一段時間了，感覺表單校驗是每一個前端開發人員都避免不了的需求。在一些前端可以自行校驗的情況下，先通過前端校驗，校驗不通過不發送請求，直到滿足校驗規則，再發送請求給后端，從而提升用戶體驗。
elementUI對表單的校驗有自己的方法，要求傳入model的必須為一個對象。但如果數據結構比較復雜，對象里面又嵌套對象，該如何校驗？本文給出多層對象嵌套的方法。
example
<template>
<el-form :model="formData" :rules="formRule" ref="formData" label-width="100px">
<el-form-item prop="name" label="姓名">
<el-input v-model="formData.name" ></el-input>
</el-form-item>
<el-form-item prop="password" label="密碼">
<el-input v-model="formData.password" ></el-input>
</el-form-item>
<el-form-item prop="user.tel" label="手機號" >
<el-input v-model="formData.user.tel" ></el-input>
</el-form-item>
<el-form-item prop="phones[0].model" label="手機號">
<el-input v-model="formData.phones[0].model"></el-input>
</el-form-item>
<el-form-item v-for="(phone, index) in formData.phones" :label="phone.brand" :key="phone.brand" :prop="'phones.' + index + '.model'" :rules="{
required: true, message: 'model不能為空', trigger: 'blur'
}">
<el-input v-model="phone.model"></el-input>
<el-form :model="formData.phones[index]" label-width="100px">
<el-form-item v-for="(item, index1) in formData.phones[index].arr" :key="index1" :prop="'arr.' + index1 + '.data1'" label="data1" :rules="{
required: true, message: 'data1不能為空', trigger: 'blur'
}">
<el-input v-model="item.data1"></el-input>
</el-form-item>
</el-form>
</el-form-item>
</el-form>
<el-button @click="handleSubmit">提交</el-button>
</template>
data () {
return {
formData:{
name: '',
password: '',
user: {
tel: ''
},
phones: [
{ brand: "華為", model: "", arr: [{ data1: "" }] },
{ brand: "小米", model: "", arr: [{ data1: "" }] }
]
},
formRule:{
name: [{required: true, message: '不能為空', trigger: 'blur'},
{pattern: /^[\u4E00-\u9FA5]+$/, message: '用戶名只能為中文', trigger: 'blur'}],
password: [{required: true, message: '不能為空', trigger: 'blur'},
{validator: Verify.validatePassword, trigger: 'blur'},
],
'user.tel' : [{required: true, message: '手機號碼不能為空', trigger: 'blur'}],
'phones[0].model': [{required: true, message: 'model不能為空', trigger: 'blur'}],
},
}
},
methods: {
handleSubmit(){
const t = this;
t.$refs['formData'].validate((valid) => {
if(valid){
console.log(this.formData);
}
})
}
}
校驗方法
model綁定的formData中內層user也是一個對象，現在想要對tel進行校驗，在prop中傳遞user.tel，并且在rules中也要指定user.tel即可。
對于子對象里面又嵌套數組的數據結構，如果想校驗數組里的元素，需要在寫一層form，用子對象作為新form表單再重新走一遍流程即可，具體例子請看上面的代碼
對于驗證規則，可以通過pattern或者validator來實現，pattern里面可以直接寫正則表達式，不知道為啥文檔中沒有提到這點。之前的驗證一般都是通過validator來實現的，驗證方法單獨寫在一個文件中，這樣可以做到整個項目公用，用到時只需通過import引一下即可。
校驗效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
