vue3多个表单一起校验

pistachioʕ̯•͡˔•̯᷅ʔ

已于 2024-06-07 16:55:41 修改

阅读量447

点赞数 16

分类专栏： vue3 element plus 文章标签： vue.js javascript 前端 vue ecmascript

于 2024-06-07 11:51:22 首次发布

本文链接：https://blog.csdn.net/qq_48499167/article/details/139522608

版权

element plus 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

当定义了多个表单但是保存时需要同时校验的时候可以这样做

<template>
   <el-form :model="userForm1" 
     label-width="auto"
     ref="userFormRef1">
   </el-form>
   <el-form :model="userForm2" 
     label-width="auto" 
     ref="userFormRef2">
   </el-form>
   <el-button type="primary" @click="handleSave"> 保存 </el-button>
<template>

<script setup lang="ts">
  import type { FormInstance } from "element-plus";
  const userForm1 = ref();
  const userForm2 = ref();
  const userFormRef1 = ref<FormInstance>();
  const userFormRef2 = ref<FormInstance>();

  const handleSave = async () => {
     const refForm1 = async () => {
       if (!userFormRef1 .value) return;
       return await userFormRef.value?.validate((valid: any, fields) => {
         if (valid) {
         } else {
           return false;
         }
       });    
     };
    const refForm2 = async () => {
      if (!userFormRef1 .value) return;
      return await organizationFormRef.value?.validate((valid: any, fields) => {
       if (valid) {
       } else {
         return false;
       }
      });
    };

    const formRes = await Promise.all([refForm1 (), refForm2 ()]);
    if (formRes[0] == true && formRes[1] == true) {

      console.log('校验成功')

    } else {
      console.log('校验失败')
    }

  };
</script>