Vue.js NuxtJS-vee验证不';不返回自定义消息
vee-validate.jsVue.js NuxtJS-vee验证不';不返回自定义消息,vue.js,vuejs2,nuxt.js,vee-validate,Vue.js,Vuejs2,Nuxt.js,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 = re
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}无效。
而不是我分配给它的内容。您需要在验证提供程序
组件上提供字段名。这是错误消息中使用的内容
<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>