element ui 对数组里面的多个雷同的字段举行校验在
element ui 对数组里面的多个雷同的字段举行校验在 Element UI 中，如果需要对数组中的多个雷同字段举行校验（比方动态天生的表单字段），可以通过动态绑定 prop 和 rules 来实现。以下是具体的实现方法：
示例场景
假设有一个数组 items，数组中的每个对象包含一个字段 value，我们需要对每个 value 举行校验。
实当代码
vue
<template>
<el-form :model="form" :rules="rules" ref="form">
<!-- 动态生成表单项 -->
<el-form-item
v-for="(item, index) in form.items"
:key="index"
:label="'字段 ' + (index + 1)"
:prop="'items.' + index + '.value'"
:rules="rules.value"
>
<el-input v-model="item.value"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="addItem">添加字段</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
items: [
{ value: '' }, // 初始字段
],
},
rules: {
value: [
{ required: true, message: '请输入字段值', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
],
},
};
},
methods: {
// 提交表单
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
alert('提交成功');
console.log('表单数据:', this.form.items);
} else {
console.log('校验失败');
return false;
}
});
},
// 添加新字段
addItem() {
this.form.items.push({ value: '' });
},
},
};
</script> 关键点阐明
[*] 动态绑定 prop：
[*] 使用 :prop="'items.' + index + '.value'" 动态绑定每个表单项的 prop。
[*] prop 的格式需要与 form 对象的结构一致。比方，items.0.value 表示 form.items.value。
[*] 动态绑定 rules：
[*] 使用 :rules="rules.value" 动态绑定校验规则。
[*] 全部字段共享雷同的校验规则。
[*] form 数据结构：
[*] form.items 是一个数组，每个数组项是一个对象，包含需要校验的字段（如 value）。
[*] 动态添加字段：
[*] 通过 addItem 方法动态向 form.items 中添加新字段。
[*] 表单校验：
[*] 使用 this.$refs.form.validate 方法触发表单校验。
[*] 如果全部字段都通过校验，valid 为 true，否则为 false。
校验效果
[*] 每个字段都会根据 rules.value 的规则举行校验。
[*] 如果某个字段未通过校验，Element UI 会自动显示错误提示。
[*] 动态添加的字段也会自动应用校验规则。
扩展：自界说校验规则
如果需要为每个字段设置不同的校验规则，可以在 rules 中动态天生规则。比方：
javascript
rules: {
value: (index) => [
{ required: true, message: `请输入字段 ${index + 1}`, trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
],
}, 然后在 el-form-item 中动态绑定规则：
vue
:rules="rules.value(index)"
总结
[*] 使用动态 prop 和 rules 可以实现对数组中多个雷同字段的校验。
[*] 通过 form.items 动态管理字段数据，支持动态添加和删除字段。
[*] Element UI 的表单校验机制非常灵活，可以或许满足复杂的表单校验需求。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]