当前位置：首页 > article >正文

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

article 2024/12/2 11:42:15

使用场景

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

示例

<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，点击按钮进行校验

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

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