基于Vue3+Element Plus 实现多表单校验

使用场景

表单校验在日常的开发需求中是一种很常见的需求,通常在提交表单发起请求前校验用户输入是否符合规则,通常只需formRef.value.validate()即可校验,但是,例如一些多步骤表单、动态表单、以及不同的用户角色可能看到不同的表单内容,因此需要对每个角色所看到的内容进行适当的校验的多用户角色的表单,此时,我们就需要同时校验多个不同的表单。

示例

javascript 复制代码
<script setup>
   import { ref, reactive } from 'vue'

   const formARef = ref(null)
   const formBRef = ref(null)

   const formA = reactive({
      name: '',
      phone: ''
   })

   const formB = reactive({
      mail: '',
      address: ''
   })

   const rules = {
      name: [
         { required: true, message: '请填写姓名', trigger: 'blur' }
      ],
      phone: [
         { required: true, message: '请填写手机号', trigger: 'blur' }
      ],
      mail: [
         { required: true, message: '请填写邮箱', trigger: 'blur' }
      ],
      address: [
         { required: true, message: '请填写住址', trigger: 'blur' }
      ],
   }

   const checkForm = () => {

   }
</script>

<template>
   <div class="box">
      <div class="formBox">
         <h2>表单A</h2>
         <el-form :model="formA" ref="formARef" label-width="auto" :rules="rules">
            <el-form-item label="姓名:" prop="name">
               <el-input v-model="formA.name" />
            </el-form-item>
            <el-form-item label="电话:" prop="phone">
               <el-input v-model="formA.phone" />
            </el-form-item>
         </el-form>
      </div>
      <el-button type="primary" @click="checkForm">点击同时校验两个表单</el-button>
      <div class="formBox">
         <h2>表单B</h2>
         <el-form :model="formB" ref="formBRef" label-width="auto" :rules="rules">
            <el-form-item label="邮箱:" prop="mail">
               <el-input v-model="formB.mail" />
            </el-form-item>
            <el-form-item label="住址:" prop="address">
               <el-input v-model="formB.address" />
            </el-form-item>
         </el-form>
      </div>
   </div>
</template>

<style lang="less">
   .box {
      width: 1000px;
      margin: 20px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   .formBox {
      width: 400px;
      height: 600px;

      h2 {
         text-align: center;
         margin-top: 20px;
         font-size: 20px;
      }
   }
</style>

(1)将两个表单绑定同一个ref,这样在调用ref.value.validate()是否可以同时校验两个表单?

修改两个表单同时绑定formARef,点击按钮进行校验

复制代码
javascript 复制代码
   const checkForm = () => {
      formARef.value.validate(valid => {
         if (valid) {
            console.log('校验通过了')
         }
      })
   }

只有第二个表单进行校验了,这是因为在 Vue3 中,使用 ref 绑定表单元素时,如果你给两个不同的表单元素都绑定了相同的 ref,例如 ref="formRef",那么在访问formRef.value 时,实际上只能引用到最后一个具有相同 ref 的表单元素。这是因为 ref 是唯一标识符,不同的 ref 值对应不同的元素或组件实例。简单理解来说就是第二个组件实例会将第一个组件实例覆盖掉,所以才会造成只有第二个表单进行了校验,而第一个表单无反应的情况。

解决

参照链接:https://juejin.cn/post/7380649024935264296

相关推荐
vx Biye_Design1 分钟前
servlet宠物医院管理系统-计算机毕业设计源码77418
java·vue.js·spring·servlet·eclipse·mybatis
一枚前端小能手15 分钟前
🔥 重学Vue之computed、watch、watchEffect原理与用途详解
前端·javascript·vue.js
Amos_Web27 分钟前
Rust实战课程--网络资源监控器(初版)
前端·后端·rust
神秘的猪头29 分钟前
html5与js今日笔记
前端
Zyx200730 分钟前
JavaScript 中的对象字面量与代理模式:用代码演绎“爱情故事”
javascript
程序猿小蒜30 分钟前
基于springboot的基于智能推荐的卫生健康系统开发与设计
java·javascript·spring boot·后端·spring
渣哥30 分钟前
IOC 容器的进化:ApplicationContext 在 Spring 中的核心地位
javascript·后端·面试
Zyx200731 分钟前
🎹用 HTML5 打造“敲击乐”钢琴:前端三剑客的第一次交响曲
前端
小时前端31 分钟前
面试官:我为什么总在浏览器存储问题上追问IndexedDB?
前端·浏览器
前端小菜哇31 分钟前
前端如何优雅的写一个记忆化函数?
前端