vue.js - NuxtJS - vee-validate 不返回自定义消息
问题描述
vee-validate.js
import { extend } from 'vee-validate'
import * as rules from 'vee-validate/dist/rules'
const phone = {
getMessage (field) {
return `The ${field} must be a valid phone number`
},
validate (value) {
const PhoneNumber = require('awesome-phonenumber')
const pn = new PhoneNumber(value)
return pn.isValid()
}
}
extend('phone', phone)
组件中的用法:
<ValidationProvider v-slot="{ errors }" rules="required|phone">
<input
v-model="number"
placeholder="Ex. +13198832832"
type="tel"
name="phonenumber"
label="Phone Number*"
/>
<ValidationDisplay :message="errors[0]" />
</ValidationProvider>
出于某种原因,验证消息始终是:
{field} is not valid.
而不是我指定的。
解决方案
您需要在ValidationProvider
组件上提供一个字段名称。这是错误消息中使用的内容。
<ValidationProvider v-slot="{ errors }" rules="required|phone" name="Phone Number">
<input
v-model="number"
placeholder="Ex. +13198832832"
type="tel"
name="phonenumber"
label="Phone Number*"
/>
<ValidationDisplay :message="errors[0]" />
</ValidationProvider>
推荐阅读
- python - 具有多个标题的 CSV。如何维护参考标题行
- ms-access - 如何修改共享点文档库中的 Access DB 文件
- bash - Bash:找到某个分区所在的磁盘并将结果放入变量中
- pycharm - PyCharm 在文档字符串中是否支持 Markdown?
- python - 使用 Openpyxl 保存启用宏的 Excel 工作簿 (.xlsm) 时出现问题。Excel 引发错误并开始修复工作簿
- cakephp - 翻译不起作用 帮助 请帮助 Cake Php
- c++ - 如何找到与给定数字最接近的数字
- python - xero_python 创建时间表
- swiftui - 在 SwiftUI 的模式表上重命名“取消”
- python - 如何构建使用 django 和 ebay python sdk 的项目?