在包含不同表单的选项卡式应用中仅验证活动表单

vue.js

2024-03-14 04:34:28

使用 Vuelidate 验证两种表单中的任意一种

问题：

使用 Vuelidate 库时，如何在具有不同表单的选项卡式应用程序中只验证活动表单？

解决方案：

步骤 1：创建验证器实例

为每个表单创建一个独立的 Vuelidate 验证器实例。

步骤 2：切换选项卡时激活/禁用验证器

在切换选项卡时，激活相应表单的验证器，并禁用另一个表单的验证器。

步骤 3：仅验证活动表单

在提交表单时，仅验证活动表单。

实现：

HTML：

<template>
  <div>
    <button @click="switchTab('login')">登录</button>
    <button @click="switchTab('signup')">注册</button>

    <form v-if="currentTab === 'login'" @submit.prevent="submitLoginForm">
      <input v-model="loginForm.email" type="email">
      <input v-model="loginForm.password" type="password">
      <button type="submit">登录</button>
    </form>

    <form v-if="currentTab === 'signup'" @submit.prevent="submitSignUpForm">
      <input v-model="signUpForm.name" type="text">
      <input v-model="signUpForm.email" type="email">
      <input v-model="signUpForm.password" type="password">
      <input v-model="signUpForm.passwordConfirmation" type="password">
      <button type="submit">注册</button>
    </form>
  </div>
</template>

JavaScript：

<script>
import { required } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      currentTab: 'login',
      loginForm: {
        email: '',
        password: ''
      },
      loginFormRules: {
        email: { required },
        password: { required }
      },
      signUpForm: {
        name: '',
        email: '',
        password: '',
        passwordConfirmation: ''
      },
      signUpFormRules: {
        name: { required },
        email: { required },
        password: { required },
        passwordConfirmation: { required, sameAsPassword: 'password' }
      }
    }
  },
  computed: {
    loginFormIsValid() {
      return !this.$v.loginForm.$invalid
    },
    signUpFormIsValid() {
      return !this.$v.signUpForm.$invalid
    }
  },
  methods: {
    switchTab(tab) {
      this.currentTab = tab
      this.$v.loginForm.$reset()
      this.$v.signUpForm.$reset()

      if (tab === 'login') {
        this.$v.loginForm.$enable()
        this.$v.signUpForm.$disable()
      } else if (tab === 'signup') {
        this.$v.signUpForm.$enable()
        this.$v.loginForm.$disable()
      }
    },
    submitLoginForm() {
      if (this.loginFormIsValid) {
        // 提交登录表单
      }
    },
    submitSignUpForm() {
      if (this.signUpFormIsValid) {
        // 提交注册表单
      }
    }
  }
}
</script>