配置VeeValidate+Yup验证textarea无效，求排查解决

问题根源 #

你犯了两个关键错误：

• Field组件的插槽变量解构错误，误用字段名description代替了通用的field对象
• 没有将定义好的Yup Schema绑定到Form组件上

修正后的代码示例 #

Script部分

import { Form, Field, ErrorMessage } from "vee-validate";
import * as yup from "yup";

const schema = yup.object({
  name: yup.string().required("Mandatory field"),
  description: yup.string().required("Mandatory field"),
});

Template部分

<Form :validation-schema="schema">
  <!-- 姓名输入框示例 -->
  <Field name="name" type="text" placeholder="Enter name" />
  <ErrorMessage name="name" class="error-message" />

  <!-- 描述文本域 -->
  <Field name="description" v-slot="{ field }">
    <textarea 
      v-bind="field" 
      id="description" 
      cols="30" 
      rows="10" 
      placeholder="Enter description"
    />
  </Field>
  <ErrorMessage name="description" class="error-message" />

  <button type="submit">提交</button>
</Form>

额外优化（可选） #

如果需要在用户输入时即时触发验证，而不是仅在提交时触发，可以给Form组件添加验证模式：

<Form :validation-schema="schema" validation-mode="eager">
  <!-- 表单内容 -->
</Form>

或者单独给Field组件添加即时验证属性：

<Field name="description" validate-on-input v-slot="{ field }">
  <!-- textarea -->
</Field>

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