vue3循环表单【以el-form组件为例】，如何校验全部表单，全部表单校验通事 ...

1.循环时，在组件标签上利用ref绑定组件实例

3.如何校验全部表单都通事后方可提交？利用promise.all()判断

代码如下：

1. <template>
2.   <div>
3.     <!-- 循环渲染表单 -->
4.     <el-form
5.       v-for="(formItem, index) in formList"
6.       :key="index"
7.       :model="formItem"
8.       :rules="rules"
9.       ref="formRefs"
10.       class="dynamic-form"
11.     >
12.       <el-form-item label="姓名" prop="name">
13.         <el-input v-model="formItem.name"></el-input>
14.       </el-form-item>
15.       <el-form-item label="年龄" prop="age">
16.         <el-input v-model.number="formItem.age"></el-input>
17.       </el-form-item>
18.       <el-form-item label="邮箱" prop="email">
19.         <el-input v-model="formItem.email"></el-input>
20.       </el-form-item>
21.     </el-form>
23.     <el-button type="primary" @click="submitForms">提交</el-button>
24.   </div>
25. </template>
27. <script setup>
28. import { ref, reactive } from 'vue'
29. import { ElMessage } from 'element-plus'
31. const formList = reactive([
32.   { name: '', age: '', email: '' },
33.   { name: '', age: '', email: '' }
34. ])
36. const rules = {
37.   name: [
38.     { required: true, message: '请输入姓名', trigger: 'blur' }
39.   ],
40.   age: [
41.     { required: true, message: '请输入年龄', trigger: 'blur' },
42.     { type: 'number', message: '年龄必须是数字', trigger: 'blur' }
43.   ],
44.   email: [
45.     { required: true, message: '请输入邮箱', trigger: 'blur' },
46.     { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
47.   ]
48. }
50. // 用于存储每个表单的 ref
51. const formRefs = ref([])
53. // 提交表单
54. const submitForms = () => {
55.   // 校验所有表单
56.   const validationPromises = formRefs.value.map((formRef) => {
57.     return new Promise((resolve, reject) => {
58.     // 对每一个具体表单的校验，都返回一个是否成功的promise状态
59.       formRef.validate((valid) => {
60.         valid ? resolve(true) : reject(false)
61.       })
62.     })
63.   })
65. // 最重要的思路
66.   Promise.all(validationPromises)
67.     .then(() => {
68.       // 所有表单校验通过
69.       ElMessage.success('所有表单校验通过')
70.       console.log('提交表单数据:', formList)
71.     })
72.     .catch(() => {
73.       // 有表单校验失败
74.       ElMessage.error('表单校验失败，请检查输入')
75.     })
76. }
77. </script>
79. <style>
80. .dynamic-form {
81.   margin-bottom: 20px;
82. }
83. </style>

复制代码

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