如何在带有 vee-validate/yup 的 vuejs3 应用程序中显示自定义错误消息？答案

【问题标题】：How in vuejs3 app with vee-validate/yup to show custom error message?如何在带有 vee-validate/yup 的 vuejs3 应用程序中显示自定义错误消息？
【发布时间】：2021-03-02 12:46:30
【问题描述】：

如果在 vuejs3 应用程序中使用 vee-validate 和 yup 可以显示自定义错误消息？我使用占位符进行选择输入输入：

              <Field
                name="published"
                as="select"
                class="form-control editable_field"
                v-model="formSelectionPublished">
                <option value="" disabled selected>- Select Category -</option>
                <option v-for="(categoryPublishedLabel) in categoryPublishedLabels" :key="categoryPublishedLabel.code">
                  {{categoryPublishedLabel.label}}
                </option>
              </Field>
              <ErrorMessage name="published" class="validation_error"/>

...
      const categoryEditValidationRules = Yup.object().shape({
        published: Yup.string().max(100).required().notOneOf(['- Select Category -']).label('Category published')

它工作正常，但我唯一需要替换错误消息：

已发布的类别不得为以下值之一：- 选择类别 -

我想显示字段必填错误消息...

在 package.json 中：

"vee-validate": "^4.0.0-beta.18", "vue": "^3.0.0", “是的”：“^0.29.3”

谢谢！

【问题讨论】：

标签： javascript yup vuejs3

【解决方案1】：

看起来是的，验证器接受第二个参数作为自定义错误消息。所以决定是：

  published: Yup.string().max(100).required().notOneOf(['- Select Category -'], 'Category published is a required field')

它对我有用！

【讨论】：