痛点
Vant没有提供内置的表单验证，但是Field输入框提供了error、error-message这两个API。
https://youzan.github.io/vant/#/zh-CN/field
image.png
<van-cell-group>
<van-field
v-model="username"
label="用户名"
placeholder="请输入用户名"
error
/>
<van-field
v-model="phone"
label="手机号"
placeholder="请输入手机号"
error-message="手机号格式错误"
/>
</van-cell-group>
虽然这样也可以自己手动验证，但是对于页面中有多个验证时弄起来还是比较烦的，最好是能有一个验证插件统一搞定这一切。
VeeValidate
基于上面的痛点，我在项目中使用了 VeeValidate 来作为验证插件，当然还有一些其他的验证插件，这个看个人喜好，你想用什么都可以，反正思路都是一样的。
//VeeValidate的基础用法
<input v-validate="'required|email'" name="email" type="text">
<span>{{ errors.first('email') }}</span>
https://baianat.github.io/vee-validate/guide/getting-started.html#basic-example
开搞
1.安装VeeValidate
npm install vee-validate --save
2.修改main
我这里是新建了一个validate.js文件来单独处理的，因为我还有一些其他自定义的验证，如果只是测试直接在main.js中修改就好了。
image.png
import Vue from "vue";
import VeeValidate, { Validator } from "vee-validate";
Vue.use(VeeValidate);
3.页面中使用
<van-field
v-model="form.contactPhone"
v-validate="'required|mobile'" //mobile是我自定义的
name="contactPhone" //特别注意一定得给name
:error-message="errors.first('contactPhone')" //错误信息
:error="errors.has('contactPhone')" //是否有错误
label="联系人电话"
placeholder="请输入手机号码"
>
mobile自定义验证代码，我也把常用的正则表达式整理了一下。https://form-validate.github.io/form-validate/
// 手机号码验证
Validator.extend("mobile", {
getMessage: () => `请输入正确的手机号码`,
validate: value =>
value.length === 11 &&
/^(((13[0-9]{1})|(14[57]{1})|(15[012356789]{1})|(17[03678]{1})|(18[0-9]{1})|(19[89]{1})|(16[6]{1}))+\d{8})$/.test(
value
)
});
4. 查看效果
image.png
5. 汉化
import zh_CN from "vee-validate/dist/locale/zh_CN";
Validator.localize("zh_CN", zh_CN);
image.png
中文是显示了，但是提示会把
input框的name值带上，看着特别的别扭，下面就来把它搞掉。
6. 搞掉丑陋的提示
先去看官网的中文文件是怎么写的，然后进行修改
https://github.com/baianat/vee-validate/blob/master/locale/zh_CN.js
image.png
源码中只需要把
field设置成空就好了，或者直接删除，我这里选择设置成空，因为删除的话比较多，有点麻烦，如果以后还需要改什么也不太方便。
7. 完整代码---validate.js文件
import Vue from "vue";
import VeeValidate, { Validator } from "vee-validate";
Vue.use(VeeValidate);
const formatFileSize = function(size) {
let units = ["Byte", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
let threshold = 1024;
size = Number(size) * threshold;
let i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(threshold));
return (size / Math.pow(threshold, i)).toFixed(2) * 1 + " " + units[i];
};
const fieldName = ""; //原来的i18n的fieldName会显示绑定的name值，就是英文，实际项目中不需要
Validator.localize("zh_CN", {
name: "zh_CN",
attributes: {},
messages: {
_default: () => `${fieldName}无效`,
after: (field, [target]) => `${fieldName}必须在${target}之后`,
alpha_dash: () => `${fieldName}能够包含字母数字字符、破折号和下划线`,
alpha_num: () => `${fieldName}只能包含字母数字字符`,
alpha_spaces: () => `${fieldName}只能包含字母字符和空格`,
alpha: () => `${fieldName}只能包含字母字符`,
before: (field, [target]) => `${fieldName}必须在${target}之前`,
between: (field, [min, max]) => `${fieldName}必须在${min}与${max}之间`,
confirmed: (field, [confirmedField]) =>
`${fieldName}不能和${confirmedField}匹配`,
credit_card: () => `${fieldName}格式错误`,
date_between: (field, [min, max]) => `${fieldName}必须在${min}和${max}之间`,
date_format: (field, [format]) => `${fieldName}必须符合${format}格式`,
decimal: (field, [decimals = "*"] = []) =>
`${fieldName}必须是数字，且能够保留${
decimals === "*" ? "" : decimals
}位小数`,
digits: (field, [length]) =>
`${fieldName}必须是数字，且精确到${length}位数`,
dimensions: (field, [width, height]) =>
`${fieldName}必须在${width}像素与${height}像素之间`,
email: () => `${fieldName}不是一个有效的邮箱`,
ext: () => `${fieldName}不是一个有效的文件`,
image: () => `${fieldName}不是一张有效的图片`,
included: () => `${fieldName}不是一个有效值`,
integer: () => `${fieldName}必须是整数`,
ip: () => `${fieldName}不是一个有效的地址`,
length: (field, [length, max]) => {
if (max) {
return `${fieldName}长度必须在${length}到${max}之间`;
}
return `${fieldName}长度必须为${length}`;
},
max: (field, [length]) => `${fieldName}不能超过${length}个字符`,
max_value: (field, [max]) => `${fieldName}必须小于或等于${max}`,
mimes: () => `${fieldName}不是一个有效的文件类型`,
min: (field, [length]) => `${fieldName}必须至少有${length}个字符`,
min_value: (field, [min]) => `${fieldName}必须大于或等于${min}`,
excluded: () => `${fieldName}不是一个有效值`,
numeric: () => `${fieldName}只能包含数字字符`,
regex: () => `${fieldName}格式无效`,
required: () => `${fieldName}不能为空`,
size: (field, [size]) => `${fieldName}必须小于${formatFileSize(size)}`,
url: () => `${fieldName}不是一个有效的url`
}
});
// 手机号码验证
Validator.extend("mobile", {
getMessage: () => `请输入正确的手机号码`,
validate: value =>
value.length === 11 &&
/^(((13[0-9]{1})|(14[57]{1})|(15[012356789]{1})|(17[03678]{1})|(18[0-9]{1})|(19[89]{1})|(16[6]{1}))+\d{8})$/.test(
value
)
});
8. 最终效果
image.png
9. 补充
一般都是点提交的时候会验证是否有错误，可以使用validateAll来验证，当然也可以指定验证，具体的可以看官方文档。
methods: {
onSubmit() {
// 验证
this.$validator.validateAll().then(result => {
if (result) {
//axios提交
}
});
}
}
