一、vuelidate
Vuelidate是一款简单轻量级的基于模块的Vue.js验证插件。
- 安装
npm install vuelidate --save
npm i -S vuelidate //简写
- 在main.js中导入库并用作Vue插件，以便在包含验证配置的所有组件上全局启用该功能：
import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)//安装插件
- 内置验证规则
required: 需要非空数据。检查仅包含空格的空数组和字符串。
maxLength:要求输入具有最大指定长度（包括最大值）。适用于数组。
minLength:要求输入具有最小指定长度（包括最小值）。适用于数组。
email: 接受有效的电子邮件地址。请记住，您仍然需要在服务器上进行仔细验证，因为无法发送验证电子邮件地址是否是真实的。
between: 检查数字或日期是否在指定范围内。最小值和最大值都包括在内。
ipAddress: 接受点分十进制表示形式的有效IPv4地址，如127.0.0.1。
alpha: 只接受字母字符。
alphaNum: 只接受字母数字。
numeric: 只接受数字。
sameAs: 检查给定属性是否相等。
url: 只接受网址。
or: 当至少有一个提供的验证器通过时通过。
and: 所有提供的验证器都通过时通过。
requiredIf: 仅当提供的属性或谓词为真时才需要非空数据。
requiredUnless: 仅当提供的属性或谓词为假时才需要非空数据。
minValue: 要求输入具有指定的最小数值或日期。
maxValue: 要求输入具有指定的最大数值或日期。
自定义验证规则（Custom Validators）
除了使用Vuelidate自带的内置验证规则外还可以使用自定义规则满足需求。
最简单的方法就是直接在当前文件的script里面设置校验规则，当然也可以单独的写一个my-validators.js的文件，无论是单独写还是抽离出来都需要引入.详情请参考 vuelidate的自定义验证规则
import { regex } from 'vuelidate/lib/validators/common'
或者
import { helpers } from 'vuelidate/lib/validators'
例子：
register.vue
//1. 先引入需要用到的验证规则
import { required, maxLength, sameAs } from 'vuelidate/lib/validators'
import { regex } from 'vuelidate/lib/validators/common'
var phone = regex('phoneNumber', /^1(3|4|5|7|8)\d{9}$/) // 手机号码校验
export default {
data () {
return {
user: {
username: '',
password: '',
confirmPassword: '',
phone: '',
phoneCode: ''
}
}
},
// 2.定义验证字段的规则
validations: {
user: {
username: {
required,
// minLength: minLength(2),
maxLength: maxLength(20),
async isUnique (value) { // 异步校验用户名是否已注册
if (value === '') return true
const response = await fetch(`/api/unique/name/${value}`)
return Boolean(await response.json())
}
},
password: {
required
},
confirmPassword: {
sameAsPassword: sameAs('password') // 校验密码是否一致
},
phone: {
required,
phone // 直接就是用的上面const设置的校验规则，自定义校验
},
phoneCode: {
required
}
}
}
}
register.vue的html部分
<div :class="{ 'form-group--error': $v.user.password.$error }" >
<input v-model.trim="$v.user.password.$model"
@blur="$v.user.password.$touch()" class="input-line"
type="password"
placeholder="请设置密码">
<span class="form-group__message" v-if="!$v.user.password.required">密码不能为空</span>
</div>
<div :class="{ 'form-group--error': $v.user.confirmPassword.$error }">
<input v-model.trim="$v.user.confirmPassword.$model"
class="input-line" type="password"
placeholder="请确认密码">
<span class="form-group__message"
v-if="!$v.user.confirmPassword.sameAsPassword">两次输入的密码不一致</span>
</div>
<div :class="{ 'form-group--error': $v.user.phone.$error }">
<input v-model.trim="$v.user.phone.$model"
@blur="$v.user.phone.$touch()" class="input-line"
placeholder="请输入手机号码">
<span class="form-group__message" v-if="!$v.user.phone.required">手机号码不能为空</span>
<span class="form-group__message" v-if="!$v.user.phone.phone">请输入正确的手机号码</span>
</div>
Register.vue的css部分
/* 表单验证样式 */
.form-group__message{
display: none;
font-size: 12px;
color: #CC3333;
}
.form-group--error > input + .form-group__message {
display: block;
color: #CC3333;
}
.form-group--error input, .form-group--error input:focus, .form-group--error input:hover, .form-group--error textarea {
border-color: #CC3333;
}
二、vee-validate
https://baianat.github.io/vee-validate/
- 安装
npm install vee-validate --save
- 引入
import Vue from "vue";
import VeeValidate, { Validator } from "vee-validate";
Vue.use(VeeValidate);
- vant页面中使用
<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/
汉化:
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
)
});
- 普通标签使用
main.js
import zh_CN from "vee-validate/dist/locale/zh_CN";
Validator.localize("zh_CN", zh_CN);
// 手机号码验证
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
)
});
HTML:
<md-field v-model="mobile" v-validate="'required|mobile'" name="mobile" data-vv-as="手机号"
icon="mobile" placeholder="请输入手机号"/>
<span>{{ errors.first('mobile') }}</span>
进行验证：
this.$validator.validateAll()校验所有,只要有一个校验失败了，就返回false
this.$validator.validateAll().then(result => {
//如果验证成功为true
if (result) {
}
});
