使用Vuelidate时，表单验证不会在屏幕上显示错误

data() {
  return {
    formData: {
      username: '',
      password: ''
    },
    validationRules: {
      username: {
        required: validators.required,
        minLength: validators.minLength(6)
      },
      password: {
        required: validators.required,
        minLength: validators.minLength(8)
      }
    }
  };
},

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="username">Username:</label>
      <input id="username" v-model="formData.username" />
      <div v-if="$v.formData.username.$error">
        <span v-if="!$v.formData.username.required">Username is required.</span>
        <span v-if="!$v.formData.username.minLength">Username must be at least 6 characters long.</span>
      </div>
    </div>
    <div>
      <label for="password">Password:</label>
      <input id="password" v-model="formData.password" />
      <div v-if="$v.formData.password.$error">
        <span v-if="!$v.formData.password.required">Password is required.</span>
        <span v-if="!$v.formData.password.minLength">Password must be at least 8 characters long.</span>
      </div>
    </div>
    <button type="submit">Submit</button>
  </form>
</template>

methods: {
  submitForm() {
    this.$v.$touch(); // 手动触发验证
    if (!this.$v.$invalid) {
      // 验证通过，继续提交表单
      // ...
    }
  }
}