vue2form表单单独校验

您可以使用 Vue.js 中的表单验证插件，例如 Vuelidate 或 VeeValidate。这些插件提供了单独校验表单字段的方法，您可以在需要校验的字段上使用 `v-validate` 指令，并设置需要的验证规则。例如：

<template>
  <form>
    <label for="username">用户名</label>
    <input id="username" type="text" v-model="username" v-validate="{ required: true }">
    <span v-show="errors.has('username')">用户名不能为空</span>

    <label for="password">密码</label>
    <input id="password" type="password" v-model="password" v-validate="{ required: true, min: 6 }">
    <span v-show="errors.has('password')">密码至少需要 6 个字符</span>

    <button type="button" @click="validateForm">提交</button>
  </form>
</template>

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

export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  validations: {
    username: {
      required
    },
    password: {
      required,
      minLength: minLength(6)
    }
  },
  methods: {
    validateForm () {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 表单校验通过，可以提交表单了
      }
    }
  }
}
</script>

在上述示例中，我们使用 Vuelidate 插件来校验表单字段。在模板中，我们在需要校验的字段上使用 `v-validate` 指令，并设置需要的验证规则。在 Vue 组件的 `validations` 选项中，我们定义了需要校验的字段和它们的验证规则。在 `validateForm` 方法中，我们调用了 `$v.$touch()` 方法来触发表单验证，如果表单校验通过，则可以提交表单了。