如何使用Vuelidate仅验证切换后的登录或注册表单？

嘿，这个场景我太熟了！之前做项目的时候也遇到过用Vuelidate处理多标签表单验证的需求，其实核心就是让验证逻辑和当前激活的表单绑定起来，给你两种实用的实现方式：

这种方式最清晰，因为登录和注册表单的逻辑完全独立，各自的验证规则和Vuelidate实例互不干扰，后期维护也更方便。

实现步骤： #

• 分别定义登录、注册的表单数据和验证规则
• 为每个表单创建专属的Vuelidate实例
• 切换标签时只渲染对应表单，提交时仅触发当前表单的验证

代码示例（Vue3 Composition API）： #

<template>
  <div class="tab-container">
    <!-- 标签切换按钮 -->
    <button 
      @click="activeTab = 'login'" 
      :class="{ active: activeTab === 'login' }"
    >
      登录
    </button>
    <button 
      @click="activeTab = 'register'" 
      :class="{ active: activeTab === 'register' }"
    >
      注册
    </button>

    <!-- 登录表单 -->
    <div v-if="activeTab === 'login'" class="form">
      <div class="form-group">
        <label>邮箱</label>
        <input v-model="loginForm.email" placeholder="请输入邮箱">
        <span class="error" v-if="$vLogin.email.$error">
          {{ $vLogin.email.email ? '邮箱格式不正确' : '邮箱不能为空' }}
        </span>
      </div>
      <div class="form-group">
        <label>密码</label>
        <input v-model="loginForm.password" type="password" placeholder="请输入密码">
        <span class="error" v-if="$vLogin.password.$error">密码不能为空</span>
      </div>
      <button @click="handleLoginSubmit">登录</button>
    </div>

    <!-- 注册表单 -->
    <div v-if="activeTab === 'register'" class="form">
      <div class="form-group">
        <label>邮箱</label>
        <input v-model="registerForm.email" placeholder="请输入邮箱">
        <span class="error" v-if="$vRegister.email.$error">
          {{ $vRegister.email.email ? '邮箱格式不正确' : '邮箱不能为空' }}
        </span>
      </div>
      <div class="form-group">
        <label>密码</label>
        <input v-model="registerForm.password" type="password" placeholder="请输入至少6位密码">
        <span class="error" v-if="$vRegister.password.$error">
          {{ $vRegister.password.minLength ? '密码长度至少6位' : '密码不能为空' }}
        </span>
      </div>
      <div class="form-group">
        <label>确认密码</label>
        <input v-model="registerForm.confirmPassword" type="password" placeholder="请再次输入密码">
        <span class="error" v-if="$vRegister.confirmPassword.$error">
          {{ $vRegister.confirmPassword.sameAs ? '两次密码不一致' : '确认密码不能为空' }}
        </span>
      </div>
      <button @click="handleRegisterSubmit">注册</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useVuelidate } from '@vuelidate/core'
import { required, email, minLength, sameAs } from '@vuelidate/validators'

// 当前激活的标签
const activeTab = ref('login')

// 登录表单数据
const loginForm = ref({
  email: '',
  password: ''
})

// 登录表单验证规则
const loginRules = {
  email: { required, email },
  password: { required }
}

// 登录表单的Vuelidate实例
const $vLogin = useVuelidate(loginRules, loginForm)

// 注册表单数据
const registerForm = ref({
  email: '',
  password: '',
  confirmPassword: ''
})

// 注册表单验证规则
const registerRules = {
  email: { required, email },
  password: { required, minLength: minLength(6) },
  confirmPassword: { required, sameAs: sameAs(() => registerForm.value.password) }
}

// 注册表单的Vuelidate实例
const $vRegister = useVuelidate(registerRules, registerForm)

// 登录提交逻辑
const handleLoginSubmit = async () => {
  // 触发登录表单的所有验证
  await $vLogin.value.$validate()
  if (!$vLogin.value.$error) {
    // 验证通过，执行登录请求
    console.log('登录表单验证通过，开始登录...')
  }
}

// 注册提交逻辑
const handleRegisterSubmit = async () => {
  // 触发注册表单的所有验证
  await $vRegister.value.$validate()
  if (!$vRegister.value.$error) {
    // 验证通过，执行注册请求
    console.log('注册表单验证通过，开始注册...')
  }
}
</script>

<style scoped>
.tab-container {
  max-width: 400px;
  margin: 20px auto;
}
button {
  padding: 8px 16px;
  margin-right: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button.active {
  background-color: #42b983;
  color: white;
}
.form {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.form-group {
  margin-bottom: 12px;
}
label {
  display: block;
  margin-bottom: 4px;
}
input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.error {
  display: block;
  margin-top: 4px;
  color: #ff4444;
  font-size: 12px;
}
</style>

如果两个表单有较多重复字段，也可以用这种方式，通过计算属性根据当前标签动态切换验证规则，不过后期逻辑复杂时不如第一种直观。

代码示例（Vue3 Composition API）： #

<template>
  <div class="tab-container">
    <button 
      @click="activeTab = 'login'" 
      :class="{ active: activeTab === 'login' }"
    >
      登录
    </button>
    <button 
      @click="activeTab = 'register'" 
      :class="{ active: activeTab === 'register' }"
    >
      注册
    </button>

    <div class="form">
      <div class="form-group">
        <label>邮箱</label>
        <input v-model="form.email" placeholder="请输入邮箱">
        <span class="error" v-if="$v.email.$error">
          {{ $v.email.email ? '邮箱格式不正确' : '邮箱不能为空' }}
        </span>
      </div>
      <div class="form-group">
        <label>密码</label>
        <input v-model="form.password" type="password" placeholder="请输入密码">
        <span class="error" v-if="$v.password.$error">
          {{ activeTab === 'login' ? '密码不能为空' : '密码长度至少6位' }}
        </span>
      </div>
      <!-- 注册表单专属字段 -->
      <div v-if="activeTab === 'register'" class="form-group">
        <label>确认密码</label>
        <input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码">
        <span class="error" v-if="$v.confirmPassword.$error">
          {{ $v.confirmPassword.sameAs ? '两次密码不一致' : '确认密码不能为空' }}
        </span>
      </div>
      <button @click="handleSubmit">提交</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useVuelidate } from '@vuelidate/core'
import { required, email, minLength, sameAs } from '@vuelidate/validators'

const activeTab = ref('login')

// 共用的表单数据
const form = ref({
  email: '',
  password: '',
  confirmPassword: ''
})

// 根据当前标签动态生成验证规则
const validationRules = computed(() => {
  if (activeTab.value === 'login') {
    return {
      email: { required, email },
      password: { required }
    }
  }
  return {
    email: { required, email },
    password: { required, minLength: minLength(6) },
    confirmPassword: { required, sameAs: sameAs(() => form.value.password) }
  }
})

// 共用的Vuelidate实例
const $v = useVuelidate(validationRules, form)

// 统一提交逻辑
const handleSubmit = async () => {
  await $v.value.$validate()
  if (!$v.value.$error) {
    if (activeTab.value === 'login') {
      console.log('执行登录逻辑...')
    } else {
      console.log('执行注册逻辑...')
    }
  }
}
</script>

<!-- 样式和方法一一致，这里省略 -->

小提示： #

• 如果是Vue2项目，只需要把Composition API的写法改成Options API的混入方式（比如在data里定义表单数据，validations选项里定义规则，不过同样可以拆分两个实例或者动态切换规则）
• 切换标签时，可以主动重置当前未激活表单的验证状态，比如$vLogin.value.$reset()，避免切换回来时还显示之前的错误提示

内容的提问来源于stack exchange，提问作者user866933