vue2 plus vee-validate - 如何在没有 ES6 的情况下自定义错误消息?
vue2 plus vee-validate - how to customize error messages without ES6?
我正在尝试(没有成功)为 vee-validate 自定义错误消息,但网站上的所有示例都使用 ES6。我可以打赌没有它也是可行的,所以我做错的任何建议都将受到赞赏:)
<script>
const messages = {
en: {
confirmed: "Your password is not confirmed",
email: "I really dont like your email"
}
};
Vue.use(VeeValidate);
var app = new Vue({
el: '#app'
});
app.$validator.updateDictionary(messages);
</script>
没有错误,只是使用了默认消息。
更新
下面是我的 HTML 代码。
<input type="text" name="email" v-validate data-vv-rules="required|email" />
<span v-show="errors.has('email')">{{ errors.first('email') }}</span>
<input type="password" name="password" v-validate data-vv-rules="required" />
<span v-show="errors.has('password')">{{ errors.first('confirmation')}} </span>
<input type="password" name="confirmation" v-validate data-vv-rules="confirmed:password"/>
<span v-show="errors.has('confirmation')">{{ errors.first('confirmation')}}/span>
() =>
是在 ES6 中定义函数的语法,因此要将 vee-validate 的语法转换为旧的 Javascript.
所以来自 documentation:
alpha: () => 'Some English Message'
将等同于
alpha: function() {
return 'Some English Message'
}
同样,您必须进行以下更改:
<script>
const messages = {
en: {
confirmed: function () {
return "Your password is not confirmed"
},
email: function () {
return "I really dont like your email"
}
}
};
Vue.use(VeeValidate);
var app = new Vue({
el: '#app'
});
app.$validator.updateDictionary(messages);
</script>
更新了带有工作示例的答案
上面的代码似乎有一些语法错误,以下是最新的工作代码 vee-validate syntax:
<script>
const dictionary = {
en: {
messages: {
confirmed: function () {
return "Your password is not confirmed"
},
email: function () {
return "I really dont like your email"
}
}
}
};
VeeValidate.Validator.updateDictionary(dictionary);
Vue.use(VeeValidate);
Vue.config.debug = true;
var App = new Vue({
el: '#app'
});
</script>
工作fiddle。
我正在尝试(没有成功)为 vee-validate 自定义错误消息,但网站上的所有示例都使用 ES6。我可以打赌没有它也是可行的,所以我做错的任何建议都将受到赞赏:)
<script>
const messages = {
en: {
confirmed: "Your password is not confirmed",
email: "I really dont like your email"
}
};
Vue.use(VeeValidate);
var app = new Vue({
el: '#app'
});
app.$validator.updateDictionary(messages);
</script>
没有错误,只是使用了默认消息。
更新
下面是我的 HTML 代码。
<input type="text" name="email" v-validate data-vv-rules="required|email" />
<span v-show="errors.has('email')">{{ errors.first('email') }}</span>
<input type="password" name="password" v-validate data-vv-rules="required" />
<span v-show="errors.has('password')">{{ errors.first('confirmation')}} </span>
<input type="password" name="confirmation" v-validate data-vv-rules="confirmed:password"/>
<span v-show="errors.has('confirmation')">{{ errors.first('confirmation')}}/span>
() =>
是在 ES6 中定义函数的语法,因此要将 vee-validate 的语法转换为旧的 Javascript.
所以来自 documentation:
alpha: () => 'Some English Message'
将等同于
alpha: function() {
return 'Some English Message'
}
同样,您必须进行以下更改:
<script>
const messages = {
en: {
confirmed: function () {
return "Your password is not confirmed"
},
email: function () {
return "I really dont like your email"
}
}
};
Vue.use(VeeValidate);
var app = new Vue({
el: '#app'
});
app.$validator.updateDictionary(messages);
</script>
更新了带有工作示例的答案
上面的代码似乎有一些语法错误,以下是最新的工作代码 vee-validate syntax:
<script>
const dictionary = {
en: {
messages: {
confirmed: function () {
return "Your password is not confirmed"
},
email: function () {
return "I really dont like your email"
}
}
}
};
VeeValidate.Validator.updateDictionary(dictionary);
Vue.use(VeeValidate);
Vue.config.debug = true;
var App = new Vue({
el: '#app'
});
</script>
工作fiddle。