基于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

相关推荐
WildBlue1 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
不讲道理的柯里昂5 分钟前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷5 分钟前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户26124583401617 分钟前
vue学习路线(10.监视属性-watch)
前端·vue.js
Spider_Man7 分钟前
React-Router 全面解析与实战指南
前端·react.js
凌览8 分钟前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
丘耳9 分钟前
前端渲染方式
前端
The_cute_cat10 分钟前
Ajax和Axios的初步学习
前端·学习·ajax
Zz_waiting.11 分钟前
Javaweb - 10.4 ServletConfig 和 ServletContext
java·开发语言·前端·servlet·servletconfig·servletcontext·域对象
爱学习的小学渣11 分钟前
JS用法:Map,Set和异步函数
前端·javascript