提交
注释：这边包含以下几个VeeValidate知识点：
1、input/textarea标签中的 v-validate、data-vv-as、name属性。（v-model我这里是双向绑定，方便把这些参数传递给接口请求，不做过多介绍） 2、错误提示标签里面的 v-show="errors.has('remark')"和**{{ errors.first('remark') }}**
v-validate：
v-validate指令添加到您希望验证的输入中，并确保您的输入具有name用于生成错误消息的属性。 然后，传递给指令一个rules字符串，其中包含由管道' |' 分隔的验证规则列表。比如上面的 出版年份的校验，使用 required这个选项是必填项， pubYear以表明该字段必须为年的格式（当然这里是自定义的），digits:4，数字长度是4。要结合这两个规则，我们指定字符串值required|pubYear|digits:4的v-validate表达式的值。
data-vv-as：
当为这个输入生成任何错误消息时，它将使用该data-vv-as值而不是实际的字段名称，默认的错误提示都是英文，如果你设置了这个，错误提示字段名称它会提示data-vv-as值
v-show="errors.has('remark')
默认错误提示的标签不加载出来
errors.first('remark')
获取关于当前remark的第一个错误信息
js部分：
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("请输入完整推荐信息！")
});
}
}
})
}
好，接下来我们一起来读一下这个代码
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("请输入完整推荐信息！")
}
}注释：上代码创建一个提交按钮事件，监听是否正常填写选项，实现校验
以上是“VeeValidate有什么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
分享标题：VeeValidate有什么用
文章出自：http://cdxtjz.cn/article/gphgjs.html
