Vuelidate
Vuelidate是一款简单轻量级的基于模块的Vue.js验证插件。
安装
安装很简单，用npm来安装只需要一句话：
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;
}
