Vue使用vee-validate表单校验

本文章主要分享作者在使用vee-validate时的用法和常用配置操作.

1.安装和使用

// 安装
npm install vee-validate --save

// 使用
import VeeValidate, { Validator } from 'vee-validate';
// 引用中文信息提示
import zh from 'vee-validate/dist/locale/zh_CN.js';
Validator.addLocale(zh);
const config = {
    locale: 'zh_CN'
}
Vue.use(VeeValidate, config);

2.示例

以下为几个示例,先看看vee-validate是如何使用的.
验证规则可以是由管道分割的验证器的字符串,也可以是规则的对象.

// 必填email字段。
<input v-validate="'required|email'" type="email" name="email">

<input v-validate="{ required: true, email: true }" type="email" name="email">

// 非必填username字段。
<input v-validate="'alpha'" type="text" name="username">

<input v-validate="{ alpha: true }" type="text" name="username">

// 必填password字段，最小长度为6个字符。
<input v-validate="'required|min:6'" type="password" name="password">

<input v-validate="{ required: true, min: 6 }" type="password" name="password">

3.验证规则

VeeValidate有自带的验证规则,涵盖了大多数验证需求,基本能满足我们的日常需求.

1.after
验证字段必须具有有效日期，并且位于目标字段中的日期值之后
基于目标的规则，如after，before和confirmed可以定位自定义组件以及本机输入，但目标字段必须具有ref属性集，并且确认的参数必须是相同的ref值

// 前一个日期必须为后一个日期之后
<input v-validate="'date_format:DD/MM/YYYY|after:afterTarget'" name="after_field" type="text">
<input name="after_field_target" ref="afterTarget" type="text">

2.before

验证字段必须具有有效日期，并且位于目标字段中的日期值之前
和after类似

// 前一个日期必须为后一个日期之前
<input v-validate="'date_format:DD/MM/YYYY|before:beforeTarget'" name="before_field" type="text">
<input name="before_field_target" ref="beforeTarget" type="text">

3.confirmed

验证字段必须与确认字段具有相同的值.用法如上

<input v-validate="'required'" name="password" type="password" :class="{'is-danger': errors.has('password')}" placeholder="Password" ref="password">
<span v-show="errors.has('password')" class="help is-danger">{{ errors.first('password') }}</span>
<input v-validate="'required|confirmed:password'" name="password_confirmation" type="password" :class="{'is-danger': errors.has('password_confirmation')}" placeholder="Password, Again" data-vv-as="password">

4.其他验证规则

验证规则	说明	验证规则	说明
alpha	验证字段可能只包含字母字符	alpha_dash	验证字段可能包含字母字符，数字，短划线或下划线
alpha_num	验证字段可能只包含字母字符或数字	alpha_spaces	验证字段可能包含字母字符或空格
between:min,max	验证字段必须具有由最小值和最大值限定的数值	credit_card	验证字段必须是有效的信用卡
date_format	验证字段必须是指定格式的有效日期	date_between	验证字段必须是两个日期之间的有效日期
decimal:n	验证字段必须是数字，并且可以包含最大的小数点数	digits:n	验证字段必须为数字且具有指定的位数
dimensions:width,height	添加到验证字段中的文件必须是具有指定尺寸的图像（jpg，svg，jpeg，png，bmp，gif）	email	验证有效的电子邮件
ext:jpeg,jpg	添加到验证字段中的文件必须指定其中一个扩展名	image	添加到验证字段中的文件必须具有图像mime类型（image / *）
ip	验证字段必须具有有效ipv4值的字符串	length:n	验证字段是否有指定的有效长度
max:n	验证字段最大的有效长度	max_value:n	验证字段允许的最大值,不可超过最大值
min:n	验证字段最小的有效长度	min_value:n	验证字段允许的最小值,不可超过最小值
numeric	验证字段仅包含数字	regex	验证字段与指定的正则表达式匹配
required	验证字段是否必需	size:n	验证字段中文件大小最大不可超过n,KB为单位

5.自定义验证规则
官方提供的验证规则有时并不能满足我们的需要,这个时候就需要新增自定义验证规则.以下为自定义手机号验证为例.当然你也可以使用上述第4条的regex正则表达式验证.

import { Validator } from 'vee-validate';
const isMobile = {
    // 错误提示
    messages: {
        zh_CN:(field, args) => field + '必须是11位手机号码',
    },
    // 验证规则
    validate: (value, args) => {
        return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
    }
}
Validator.extend('isMobile', isMobile);

//或者直接

Validator.extend('isMobile', {
    // 错误提示
    messages: {
        zh_CN:field => field + '必须是11位手机号码',
    },
    // 验证规则
    validate: value => {
        return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
    }
});

// 设置提示的名词
const dictionary = {
    zh_CN: {
        messages:{
            email: () => '请输入正确的邮箱',    // 邮箱输入错误时提示
            required: (field) => '请输入' + field    // 输入为空时提示
        },
        // 设置提示的名词
        attributes: {
            email: '邮箱地址',
            isMobile: '手机号码'
        }
    }
};

Validator.updateDictionary(dictionary);

4.错误信息

<span v-show:"errors.has('email')">{{ errors.first('email') }}</span>

errors打印出来是这样的：{ “item”: [ { “id”: “_9e6hk2qh2”, “field”: “email”, “msg”: “email 是必须的”, “rule”: “email”, “scope”: null } ] }，span标签通过errors的几个方法来进行显示隐藏和提示错误，这里列出几个常用的errors方法：
1.errors.first(‘field’)：当前field的第一个错误信息，字符串
2.errors.collect(‘field’)：当前field的所有错误信息，数组列表
3.errors.has(‘field’)：当前filed是否有错误，布尔值
4.errors.all()：当前表单所有错误，数组列表
5.errors.any()：当前表单是否有任何错误，布尔值

有时候错误信息并不是我们想要的,这个时候就需要重新定义错误提示信息。你可以在node_modules目录下的vee-validate/dist/locale/ 下找到对应的文件修改提示信息,也可以重新定义新的提示信息.具体如下

import { Validator } from 'vee-validate';

const dictionary = {
    zh_CN: {
        messages:{
            email: () => '请输入正确的邮箱',    // 邮箱输入错误时提示
            required: (field) => '请输入' + field    // 输入为空时提示
        },
        // 设置提示的名词
        attributes: {
            email: 'Email Address'
        }
    }
};

Validator.updateDictionary(dictionary);