前端开发 vue 中如何实现 u-form 多个form表单同时校验

在 Vue 项目中使用 UView UI 的 u-form 组件时，多个表单同时校验的需求非经常见。比方，当我们有多个表单必要在同一个页面中举行校验并提交时，我们必要确保每个表单都能举行单独验证，同时可以在同一时刻举行批量验证。
接下来，我们结合现实项目标代码，讲解如何使用 u-form 组件实现多个表单同时校验。
1. 项目背景

假设你有一个页面，必要用户同时填写用户信息和公司信息两个表单。用户信息包罗姓名和年事，公司的信息包罗公司名和职位。你希望在用户点击提交按钮时，可以或许同时校验这两个表单，确保每个表单的数据都符合要求。
2. 代码示例

2.1 页面模板

1. <template>
2.   <view>
3.     <!-- 用户信息表单 -->
4.     <u-form :model="userForm" ref="userForm" @submit="submitForms">
5.       <u-form-item label="姓名" prop="name" :rules="nameRules">
6.         <u-input v-model="userForm.name" placeholder="请输入姓名" />
7.       </u-form-item>
8.       <u-form-item label="年龄" prop="age" :rules="ageRules">
9.         <u-input type="number" v-model="userForm.age" placeholder="请输入年龄" />
10.       </u-form-item>
11.       <u-form-item>
12.         <u-button type="primary" block formType="submit">提交用户信息</u-button>
13.       </u-form-item>
14.     </u-form>
16.     <!-- 公司信息表单 -->
17.     <u-form :model="companyForm" ref="companyForm" @submit="submitForms">
18.       <u-form-item label="公司名称" prop="companyName" :rules="companyNameRules">
19.         <u-input v-model="companyForm.companyName" placeholder="请输入公司名称" />
20.       </u-form-item>
21.       <u-form-item label="职位" prop="position" :rules="positionRules">
22.         <u-input v-model="companyForm.position" placeholder="请输入职位" />
23.       </u-form-item>
24.       <u-form-item>
25.         <u-button type="primary" block formType="submit">提交公司信息</u-button>
26.       </u-form-item>
27.     </u-form>
29.     <!-- 提交按钮 -->
30.     <u-button type="success" block @click="submitForms">提交所有信息</u-button>
31.   </view>
32. </template>

复制代码

2.2 页面脚本

1. <script>
2. export default {
3.   data() {
4.     return {
5.       // 用户信息表单的数据
6.       userForm: {
7.         name: '',
8.         age: ''
9.       },
10.       // 用户信息表单的校验规则
11.       nameRules: [
12.         { required: true, message: '姓名是必填的', trigger: 'blur' }
13.       ],
14.       ageRules: [
15.         { required: true, message: '年龄是必填的', trigger: 'blur' },
16.         { type: 'number', message: '请输入有效的年龄', trigger: 'blur' }
17.       ],
19.       // 公司信息表单的数据
20.       companyForm: {
21.         companyName: '',
22.         position: ''
23.       },
24.       // 公司信息表单的校验规则
25.       companyNameRules: [
26.         { required: true, message: '公司名称是必填的', trigger: 'blur' }
27.       ],
28.       positionRules: [
29.         { required: true, message: '职位是必填的', trigger: 'blur' }
30.       ]
31.     };
32.   },
33.   methods: {
34.     // 提交表单
35.     submitForms() {
36.       // 同时校验所有表单
37.       const userFormValidation = this.$refs.userForm.validate();
38.       const companyFormValidation = this.$refs.companyForm.validate();
40.       // 使用 Promise.all 来并行验证多个表单
41.       Promise.all([userFormValidation, companyFormValidation])
42.         .then(() => {
43.           // 如果所有表单验证通过
44.           this.$u.toast('所有表单验证通过，提交成功');
45.           // 可以在这里进行数据提交
46.         })
47.         .catch(() => {
48.           // 如果有任何表单验证失败
49.           this.$u.toast('表单验证失败，请检查输入');
50.         });
51.     }
52.   }
53. };
54. </script>

复制代码

3. 详细说明

3.1 表单组件使用

• u-form：这是 UView UI 中的表单组件。每个表单组件通过 :model 绑定对应的数据对象，通过 ref 设置引用名，以便在 JavaScript 中获取并调用表单的验证方法。
  
• u-form-item：每个表单项。它用来包装一个表单字段，并且通过 prop 来指定字段名称，用来与表单数据举行绑定。
  
• u-input：用于输入数据的组件。它通过 v-model 来双向绑定数据。
  

3.2 校验逻辑

• 表单校验规则：每个表单项都有相应的校验规则（rules）。这些规则确保字段的输入符合预期。在此示例中，我们使用了必填和类型检查（如 number 类型）的规则。
  
• validate 方法：每个 u-form 组件都有一个 validate 方法，它会触发表单的校验并返回一个 Promise。如果表单验证乐成，Promise 会乐成剖析；如果验证失败，Promise 会被拒绝。
  

3.3 提交和批量校验

• submitForms 方法：这是页面的提交处理方法。在该方法中，我们使用了 this.$refs.userForm.validate() 和 this.$refs.companyForm.validate() 来分别触发两个表单的校验，并通过 Promise.all 来并行校验这两个表单。
  
• Promise.all：我们将两个表单的校验 Promise 包装到 Promise.all 中。如许，两个表单的校验会同时举行。当全部表单验证都乐成时，then 方法被触发；如果有任何一个表单验证失败，catch 方法会被触发。
  
• this.$u.toast：用来表现提示消息，通知用户是否提交乐成或失败。
  

4. 关键点总结

• 使用 ref 引用多个表单，方便访问每个表单实例。
  
• 通过 this.$refs.form.validate() 触发表单校验。
  
• 使用 Promise.all 来并行校验多个表单，确保全部表单的验证同时举行。
  
• 使用 validate 返回的 Promise 来处理校验乐成与失败的逻辑。
  

5. 现实项目中的应用场景

在现实项目中，大概会有以下场景必要处理多个表单的验证：

• 多步调表单：用户在差别的步调中填写差别的表单，在提交时必要同时验证全部步调的表单。
  
• 用户与公司信息：用户必要在同一页面提交多个表单（比方，个人信息和公司信息），而且这些表单有差别的校验规则。
  
• 动态表单：根据差别的用户选择，动态展示多个表单项，最后举行一次统一的验证。
  

通过使用 u-form 的并行校验方法，可以方便地实现这些需求，进步用户体验和开发效率。

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