javascript - 如何在带有 vee-validate/yup 的 vuejs3 应用程序中显示自定义错误消息?
问题描述
如果在 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”,“yup”:“^0.29.3”
谢谢!
解决方案
看起来是的验证器接受第二个参数作为自定义错误消息。所以决定是:
published: Yup.string().max(100).required().notOneOf(['- Select Category -'], 'Category published is a required field')
它对我有用!
推荐阅读
- angular - 可以上传图像并自动适应pdf中特定框的大小吗?
- kubernetes - 集群内无法访问 ClusterIP
- function - 在 OnClickListener 中,如何使用不同的参数多次调用函数。前一个完成后要运行的功能
- swift - SwiftUI 在元素外点击时关闭(或绝对定位)
- c - 如何一直要求用户输入直到他们选择退出?
- python - CPLEX 和 Gurobi 之间的比较
- python - python将python浮点数与numpy浮点数相乘
- python - 使用 IQR 在 Pandas df 中标记异常值
- express-checkout - PayPal Express Checkout:调用 GetExpressCheckoutDetails 时 CHECKOUTSTATUS=PaymentActionNotInitiated
- sql - groupby 计数并在 leftjoin 之后