element 表单校验数组嵌套,数组对象中对象必填校验
时间: 2023-08-10 14:44:23 浏览: 217
如果您在使用 Element UI 表单组件进行数组嵌套校验时需要实现必填校验,可以使用自定义的校验函数。具体实现步骤如下:
1. 在表单项中使用 `el-form-item` 包裹需要校验的表单项,并为其添加 `prop` 属性,例如:
```html
<el-form-item label="嵌套数组" prop="nestedArray">
<!-- 嵌套数组表单项 -->
</el-form-item>
```
2. 在自定义的校验函数中,对嵌套的数组对象进行遍历,并对每个对象的属性进行必填校验,例如:
```js
import { validateNestedArray } from '@/utils/validate'
export default {
data() {
return {
nestedArray: [
{ name: '', age: '', gender: '' },
{ name: '', age: '', gender: '' },
{ name: '', age: '', gender: '' }
]
}
},
methods: {
validate() {
return this.$refs.form.validate()
},
validateNestedArray(rule, value, callback) {
if (!value) {
callback(new Error('嵌套数组不能为空'))
} else {
for (let i = 0; i < value.length; i++) {
const nestedObj = value[i]
if (!nestedObj.name || !nestedObj.age || !nestedObj.gender) {
callback(new Error(`第 ${i + 1} 个对象中的所有属性均为必填项`))
return
}
}
callback()
}
}
}
}
```
3. 在 `el-form` 中添加 `rules` 属性,并将自定义的校验函数作为校验规则,例如:
```html
<el-form ref="form" :model="form" :rules="rules">
<!-- 表单项 -->
</el-form>
```
```js
import { validateNestedArray } from '@/utils/validate'
export default {
data() {
return {
form: {
nestedArray: [
{ name: '', age: '', gender: '' },
{ name: '', age: '', gender: '' },
{ name: '', age: '', gender: '' }
]
},
rules: {
nestedArray: [
{ validator: validateNestedArray, trigger: 'blur' }
]
}
}
},
methods: {
validate() {
return this.$refs.form.validate()
},
validateNestedArray(rule, value, callback) {
// 校验函数实现
}
}
}
```
通过以上步骤,就可以实现 Element UI 表单组件中的数组嵌套校验,具体的实现细节可以根据实际情况进行调整。
阅读全文