vue3+vant4父组件点击提交并校验子组件form表单

先看结果

代码如下
父组件

1. <template>
2.   <ChildForm ref="childFormRef" />
3.   <button @click="validateForm">校验表单</button>
4. </template>
5. <script setup>
6. import { ref } from 'vue';
7. import ChildForm from './ChildForm.vue';
8. const childFormRef = ref(null);
9. const validateForm = async () => {
10.   if (childFormRef.value) {
11.     try {
12.       const isValid = await childFormRef.value.validate();
13.       console.log('Form valid:', isValid);
14.     } catch (error) {
15.       console.error('Validation error:', error);
16.     }
17.   }
18. };
19. </script>

复制代码

子组件

1. <!-- ChildForm.vue -->
2. <template>
3.     <van-form ref="formRef">
4.       <!-- 表单项 -->
5.       <van-field label="账号" name="账号" v-model="pageList.fieldValue" :rules="rules" />
6.       <van-field
7.       v-model="pageList.password"
8.       label="密码"
9.       name="密码"
10.       type="password"
11.       placeholder="请输入密码"
12.       :rules="[{ required: true, message: '请输入密码' }]"
13.     />
14.     </van-form>
15.   </template>
16.   <script setup>
17.   import { ref, defineExpose } from 'vue';
18.   const formRef = ref(null);
19.   let pageList = ref({
20.     fieldValue:'',
21.     password:'',
22.   })
23.   const rules = ref([
24.     { required: true, message: 'This field is required' }
25.   ]);
26.   
27.   const validate = async () => {
28.     if (formRef.value) {
29.       try {
30.         await formRef.value.validate();
31.         return true;
32.       } catch (error) {
33.         return false;
34.       }
35.     }
36.     return false;
37.   };
38.   defineExpose({ validate });
39.   </script>
40.   

复制代码

父组件通过ref获取子组件的引用，在父组件的点击事件中调用子组件的validate方法进行表单验证，如果验证通过则实行提交逻辑。子组件通过defineExpose暴露其validate方法给父组件使用。这样父组件就可以通过childForm.value.validate调用子组件的验证方法了。

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