Vuelidate 表单校验插件

Vuelidate

Vuelidate是一款简单轻量级的基于模块的Vue.js验证插件。

github地址https://github.com/vuelidate/vuelidate

安装

安装很简单，用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;
}