当为这个输入生成任何错误消息时，它将使用该data-vv-as值而不是实际的字段名称，默认的错误提示都是英文，如果你设置了这个，错误提示字段名称它会提示data-vv-as值
v-show="errors.has('remark')
默认错误提示的标签不加载出来
errors.first('remark')
获取关于当前remark的第一个错误信息
js部分：
<script type="text/javascript"> var IndexPage = "http://localhost:8080/xxxx.html" var AuthCode = "12131"; $(function () { recommend(AuthCode); }) VeeValidate.Validator.localize('zh_CN'); Vue.use(VeeValidate); VeeValidate.Validator.localize({ zh_CN: { messages: { required: function (name) { return name + '不能为空' }, } } }) VeeValidate.Validator.extend('isbn',{ getMessage: function () { return " 请输入正确格式的isbn号" }, validate: function (value) { return /^[\d-]*$/.test(value);} }) VeeValidate.Validator.extend('pubYear', { getMessage: function () { return " 请输入正确的年份" }, validate: function (value) { return /^(19|20)\d{2}$/.test(value); } }) function recommend(AuthCode) { var classList = new Vue({ el: '#recommend-box', data: function () { return { title: "", author: "", publisher: "", pubYear: "", type: "", remark: "", isbn: "" } }, methods: { validateBeforeSubmit() { this.$validator.validateAll().then((result) => { if (result) { $.ajax({ url: '/xxxx', data: { Request: "xxxxx", title: this.title, author: this.author, publisher: this.publisher, pubYear: this.pubYear, type: this.type, remark: this.remark, isbn: this.isbn, certId: AuthCode }, type: 'POST', dataType: "json", success: function (data) { var msg = data.msg; alert(msg); window.location.href = IndexPage; } }); return; } alert("请输入完整推荐信息！") }); } } }) } </script>
好，接下来我们一起来读一下这个代码
VeeValidate.Validator.localize('zh_CN'); Vue.use(VeeValidate);
注释：这以上代码的意思是 1、改变成zh_CN中午的语言环境，如果不改默认提示是英文 2、安装VeeValidate插件，也可以理解是初始化
VeeValidate.Validator.localize({ zh_CN: { messages: { required: function (name) { return name + '不能为空' }, } } })
注释：上代码修改默认提示语，name属性加不能为空，也就是必填项的非空判断
VeeValidate.Validator.extend('isbn',{ getMessage: function () { return " 请输入正确格式的isbn号" }, validate: function (value) { return /^[\d-]*$/.test(value);} }) VeeValidate.Validator.extend('pubYear', { getMessage: function () { return " 请输入正确的年份" }, validate: function (value) { return /^(19|20)\d{2}$/.test(value); } })
注释：上代码修改自定义规则 getMessage ： 提示语。 validate： 就是匹配规则，通常就正则咯。
validateBeforeSubmit() { this.$validator.validateAll().then((result) => { if (result) { //这里写具体的接口请求 alert("推荐成功！") return; } alert("请输入完整推荐信息！") } }
注释：上代码创建一个提交按钮事件，监听是否正常填写选项，实现校验
一个完整的校验应用案例到这里已经讲解的差不多了，小伙伴们可以根据自己的实际情况应用在自己的项目中，如果需要深入了解，可以移步到官网https://baianat.github.io/vee-validate/guide/。