Javascript 在VeeValidate3和VueJS中添加自定义错误消息

我正在尝试为自定义验证器添加新的错误消息。 首先，我通过以下方式更改了验证错误的默认语言：

import VeeValidate, { Validator } from 'vee-validate';
import it from 'vee-validate/dist/locale/it';


Validator.localize({ it: it });
Vue.use(VeeValidate, { inject: false, fastExit: false, locale: 'it' });

以下是扩展验证程序（在另一个文件中）：

当日期格式不正确时，如何显示自定义消息？

---

谢谢两种方式：（按）

您可以通过在验证函数本身中返回字符串来更改错误消息：

从'vee validate'导入{extend}；
扩展（'正'，值=>{
如果（值>=0）{
返回true；
}
返回“此字段必须为正数”；
});

或者，您可以使用扩展格式并传入

消息

属性：

this.$validator.extend（'dateFormat'{
验证：值=>{
设reg=/（0[1-9]|[12][0-9]|[3[01]）[-/.]（0[1-9]| 1[012]）[-/.]（19 | 20）[0-9][0-9]/；
如果（注册表执行（值）==null）{
返回false；
}
返回true；
},
//消息属性：
消息：“日期格式不正确”，
});
push（'dateFormat'）；

---

本地化

如果您希望支持多种语言，上述解决方案将无法实现

基于，您应该能够使用

{localize}

导入和以下对象语法为任何语言添加本地化消息：

从'vee validate'导入{localize}；
本地化({
嗯:{
信息：{
必填项：“此字段为必填项”，
min:'此字段必须包含不少于{length}个字符'，
max:（{length}）=>`此字段不能超过${length}个字符`
}
}
});

---

作为旁注，您还可以将

if（reg.exec（value）==null）

行简化为：

return reg.exec（值）！=无效的

我就是这样解决的，不知道这是否是最佳做法，但似乎有效：

//Add this line
it.messages.dateFormat = function (field) { return 'Format for ' + field + ' not valid'; };
Validator.localize({ it: it });
Vue.use(VeeValidate, { inject: false, fastExit: false, locale: 'it' });

---

我试图传递'message'属性，但它似乎仍然返回默认消息，即，{u field}值无效。它是否与HTML元素有关？我很高兴您找到了它！如果非要我猜的话，我敢打赌阻止其他解决方案工作的原因与本地化有关。。。文档提供了另一种为地区添加消息的方法，可能值得一看。事实上，我认为这正是这里发生的事情，

it.messages.dateFormat

做的事情与速记相同。我将把文档中的语法添加到我的答案中。

//Add this line
it.messages.dateFormat = function (field) { return 'Format for ' + field + ' not valid'; };
Validator.localize({ it: it });
Vue.use(VeeValidate, { inject: false, fastExit: false, locale: 'it' });