Vue 表单校验：只校验一项内容

本文将介绍如何使用 Vuelidate 插件在 Vue 表单中只校验其中一项内容。下面是一个示例代码，用于只校验表单中的邮箱字段：

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="email">Email:</label>
      <input id="email" v-model="email" type="email" />
      <div v-if="!$v.email.email">请输入有效的邮箱地址</div>
    </div>

    <div>
      <label for="password">Password:</label>
      <input id="password" v-model="password" type="password" />
      <div v-if="!$v.password.minLength">密码长度至少为6个字符</div>
    </div>

    <button type="submit">提交</button>
  </form>
</template>

<script>
import { required, email, minLength } from 'vuelidate/lib/validators';

export default {
  data() {
    return {
      email: '',
      password: '',
    };
  },
  validations: {
    email: {
      email,
    },
    password: {
      minLength: minLength(6),
    },
  },
  methods: {
    submitForm() {
      if (this.$v.email.email && this.$v.password.minLength) {
        // 表单校验通过，可以进行提交操作
        console.log('表单校验通过');
      } else {
        console.log('表单校验不通过');
      }
    },
  },
};
</script>

在上面的示例代码中，使用了vuelidate插件进行表单校验。validations字段定义了email和password的校验规则，$v.email.email和$v.password.minLength用于判断是否通过校验。在submitForm方法中，通过判断这两个属性的值来确定是否进行表单提交。

通过这种方式，你可以实现只校验其中一项表单的功能。