element ui 对数组里面的多个雷同的字段举行校验在

element ui 对数组里面的多个雷同的字段举行校验
在 Element UI 中，如果需要对数组中的多个雷同字段举行校验（比方动态天生的表单字段），可以通过动态绑定 prop 和 rules 来实现。以下是具体的实现方法：

---

示例场景

假设有一个数组 items，数组中的每个对象包含一个字段 value，我们需要对每个 value 举行校验。

---

实当代码

vue

1. <template>
2.   <el-form :model="form" :rules="rules" ref="form">
3.     <!-- 动态生成表单项 -->
4.     <el-form-item
5.       v-for="(item, index) in form.items"
6.       :key="index"
7.       :label="'字段 ' + (index + 1)"
8.       :prop="'items.' + index + '.value'"
9.       :rules="rules.value"
10.     >
11.       <el-input v-model="item.value"></el-input>
12.     </el-form-item>
14.     <el-form-item>
15.       <el-button type="primary" @click="submitForm">提交</el-button>
16.       <el-button @click="addItem">添加字段</el-button>
17.     </el-form-item>
18.   </el-form>
19. </template>
21. <script>
22. export default {
23.   data() {
24.     return {
25.       form: {
26.         items: [
27.           { value: '' }, // 初始字段
28.         ],
29.       },
30.       rules: {
31.         value: [
32.           { required: true, message: '请输入字段值', trigger: 'blur' },
33.           { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
34.         ],
35.       },
36.     };
37.   },
38.   methods: {
39.     // 提交表单
40.     submitForm() {
41.       this.$refs.form.validate((valid) => {
42.         if (valid) {
43.           alert('提交成功');
44.           console.log('表单数据:', this.form.items);
45.         } else {
46.           console.log('校验失败');
47.           return false;
48.         }
49.       });
50.     },
51.     // 添加新字段
52.     addItem() {
53.       this.form.items.push({ value: '' });
54.     },
55.   },
56. };
57. </script>

复制代码

---

关键点阐明

• 动态绑定 prop：
  
  
  
  • 使用 :prop="'items.' + index + '.value'" 动态绑定每个表单项的 prop。
    
  • prop 的格式需要与 form 对象的结构一致。比方，items.0.value 表示 form.items[0].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

1. rules: {
2.   value: (index) => [
3.     { required: true, message: `请输入字段 ${index + 1}`, trigger: 'blur' },
4.     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
5.   ],
6. },

复制代码

然后在 el-form-item 中动态绑定规则：
vue
:rules="rules.value(index)"

---

总结

• 使用动态 prop 和 rules 可以实现对数组中多个雷同字段的校验。
  
• 通过 form.items 动态管理字段数据，支持动态添加和删除字段。
  
• Element UI 的表单校验机制非常灵活，可以或许满足复杂的表单校验需求。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。