VeeValidate——vue2.0表单验证插件

一、vee-validate入门

　　vee-validate 是一个轻量级的 vue表单验证插件。它有很多开箱即用的验证规则，也支持自定义验证规则。它是基于模板的，因此它与HTML5验证API类似且熟悉。可以验证HTML5输入以及自定义Vue组件。

　　项目地址：vee-validate

　　官方文档：VeeValidate

1、安装

# NPM安装
$ npm install vee-validate --save

# CDN安装
<!-- jsdelivr cdn -->
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/vee-validate@latest"></script>

2、引用

（1）方法一：在main.js中添加

　　这里使用的是ES6/ES2015语法。ES2015语法是从ES5的一次巨大飞跃，它给JavaScript增加了大量的功能特性。

import Vue from 'vue'
import axios from 'axios'
import VeeValidate, {Validator} from 'vee-validate';
import veeMessage from 'vee-validate/dist/locale/zh_CN';

// 添加表单验证
Vue.use(VeeValidate, {
  classes: true,
  classNames: {
    valid: 'is-valid',
    invalid: 'is-invalid'
  }
});

// 使用中文提示
Validator.localize('zh_CN', veeMessage);

　　zh_CN是从 node_module/vee-validate/dist/locale目录下拷贝到项目中的中文语言包。

（2）方法二：直接包含脚本

<script src="path/to/vue.js"></script>
<script src="path/to/vee-validate.js"></script>
<script>
  Vue.use(VeeValidate); // good to go.
</script>

3、基本使用

　　只需要将 v-validate 指令添加到要验证的输入中，并确保输入中包含生成错误消息的 name 属性。然后，向指令传递一个 rules 字符串，其中包含由管道 ‘|’ 分隔的验证规则列表。

<input v-validate="'required|email'" name="email" type="text">

　　在上面示例中， required 表明该字段是必须的，email 则表示该字段必须为电子邮件。因此使用结合这两个规则，声明字符串变量 required|email 给 v-validate 表达式的值。

　　如果要显示错误信息，只需使用 errors.first 方法获取该字段生成的第一个错误：

<span>{{ errors.first('email') }}</span>

　　但是需要注意：客户端验证永远不能替代服务器验证，确保在后端验证用户的任何输入。

　　提醒：错误信息里面的名称通常就是表单的name属性，除非是通过Vue实例传递进去的。

　　提醒：养成习惯，给每个field添加 name 属性，如果没有 name 属性又没有对值进行绑定的话，validator 可能不会对其进行正确校验。

二、显示错误

　　errors是组件内置的一个数据模型，用来存储和处理错误信息。默认情况下，错误包实例将注入组件 errors 名称下的计算属性中，可以对其进行自定义以避免与其他 库/组件 发送冲突。

1、显示单个错误消息

　　希望一次为字段显示一个错误，使用 errors.first('fieldName') 方法执行此操作。

<input type="text" name="fieldName" v-validate="'required'">
<span>{{ errors.first('fieldName') }}</span>

　　VeeValidate 默认每个字段仅生成一条消息，因为它在运行验证管道时使用快速退出策略。当检测到第一个失败规则时，它将生成消息并将其存储在错误包实例中，然后忽略其他规则结果。

　　要禁用此行为，需要 fastExit 在 VeeValidate的配置中 配置选项或使用 continues 修饰符。

2、显示多条错误消息

　　通常应用场景是允许用户一次修复多个输入错误。errors.collect('fieldName') 方法可以将特定字段的所有错误消息收集到数组中。

<input type="text" name="fieldName" v-validate.continues="'required|alpha|min:5'">
<ul>
  <li v-for="error in errors.collect('fieldName')">{{ error }}</li>
</ul>

3、显示所有错误

　　如果需要在表单上显示所有字段错误，尤其是非常大的表单。

（1）错误列表

　　可以使用 errors.all() 将所有字段错误收集到单个平面数组中。

<input type="text" name="first" v-validate.continues="'required|alpha|min:5'">
<input type="text" name="second" v-validate.continues="'required|alpha|min:5'">
<ul>
  <li v-for="error in errors.all()">{{ error }}</li>
</ul>

（2）按字段名称分组

　　使用 erros.collect() 按字段名称对错误消息进行分组，其中键是字段名称，值是每个字段的错误消息数组：

<input type="text" name="first" v-validate.continues="'required|alpha|min:5'">
<input type="text" name="second" v-validate.continues="'required|alpha|min:5'">
<ul>
  <li v-for="group in errors.collect()">
    <ul>
      <li v-for="error in group">{{ error }}</li>
    </ul>
  </li>
</ul>

三、内置的验证规则

1、内置验证规则汇总

after{target} - 比target要大的一个合法日期，格式(DD/MM/YYYY)
alpha - 只包含英文字符
alpha_dash - 可以包含英文、数字、下划线、破折号
alpha_num - 可以包含英文和数字
before:{target} - 和after相反
between:{min},{max} - 在min和max之间的数字
confirmed:{target} - 必须和target一样
date_between:{min,max} - 日期在min和max之间
date_format:{format} - 合法的format格式化日期
decimal:{decimals?} - 数字，而且是decimals进制
digits:{length} - 长度为length的数字
dimensions:{width},{height} - 符合宽高规定的图片
email - 不解释
ext:[extensions] - 后缀名
image - 图片
in:[list] - 包含在数组list内的值
ip - ipv4地址
max:{length} - 最大长度为length的字符
mimes:[list] - 文件类型
min - max相反
mot_in - in相反
numeric - 只允许数字
regex:{pattern} - 值必须符合正则pattern
required - 不解释
size:{kb} - 文件大小不超过
url:{domain?} - (指定域名的)url

2、内置规则使用示例

<input type="text" class="form-control" id="tel" v-model="queryInfo.tel" placeholder="手机号码"
    v-validate="'min:11|max:11|numeric'" name="tel" data-vv-as="手机号码">

<input type="text" class="form-control" id="idNum" v-model="queryInfo.idNumCipher" placeholder="身份证号"
    v-validate="'required|max:18|min:18|alpha_num'" name="idNum" data-vv-as="身份证号">

<input type="text" class="form-control" id="emailnum" v-model="queryInfo.email" placeholder="电子邮箱"
    v-validate="'email'" name="emailnum" data-vv-as="电子邮箱">

　　如果使用了 data-vv-as 属性，在输入生成任何错误消息时，它将使用 data-vv-as 值而不是实际的字段名称。

　　这样对于简单设置和显示本地化名称非常有用，但仅适用于单一语言环境页面。

四、自定义验证规则

1、直接定义

const validator = (value, args) => {
    // Return a Boolean or a Promise.
}
//最基本的形式，只返回布尔值或者Promise，带默认的错误提示

2、对象形式

const validator = {
    getMessage(field, args) { // 添加到默认的英文错误消息里面
        // Returns a message.
    },
    validate(value, args) {
        // Returns a Boolean or a Promise.
    }
};

3、添加到指定语言的错误消息

const validator = {
    messages: {
        en: (field, args) => {
            // 英文错误提示
        },
        cn: (field, args) => {
            // 中文错误提示
        }
    },
    validate(value, args) {
        // Returns a Boolean or a Promise.
    }
};

　　创建了规则之后，用extend方法添加到Validator里：

import { Validator } from 'vee-validate';
const isMobile = {
    messages: {
        en:(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('mobile', isMobile);

//或者直接

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

　　然后可以直接把mobile当成内置规则使用：

<input v-validate data-rules="required|mobile" :class="{'input': true, 'is-danger': errors.has('mobile') }" name="mobile" type="text" placeholder="Mobile">
<span v-show="errors.has('mobile')" class="help is-danger">{{ errors.first('mobile') }}</span>

4、自定义内置规则的错误信息

import { Validator } from 'vee-validate';

const dictionary = {
    en: {
        messages: {
            alpha: () => 'Some English Message'
        }
    },
    cn: {
        messages: {
            alpha: () => '对alpha规则的错误定义中文描述'
        }
    }
};

Validator.updateDictionary(dictionary);

5、常用自定义规则

Validator.localize('zh_CN', veeMessage);

// 自定义身份证号码验证
Validator.extend('idCardNum', {
  getMessage: field => '请输入正确的身份证号码',
  // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
  validate: value => /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)
});

// 自定义手机号码验证
Validator.extend('mobile', {       // extend的第一个参数就是自定义的规则的名字
  getMessage: field => '请输入正确的手机号码',       // getMessage中是错误提示信息
  validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)    // validate是验证规则，返回一个布尔值或promise
});

// 自定义敏感词过滤
const sensitiveWordRule = {
  getMessage: (field, args) => field + '敏感字段',
  validate: (value, args) => {
    let sensitiveMap = makeSensitiveMap(sensitiveWordList);
    console.log('sensitivemap', sensitiveMap);
    if (checkSensitiveWord(sensitiveMap, value).length > 0) {
      console.log(checkSensitiveWord(sensitiveMap, value))
      return false;
    } else {
      console.log(checkSensitiveWord(sensitiveMap, value))
      return true;
    }
  }
};

Validator.extend('sensitiveWordFilter', sensitiveWordRule);

6、与相关组件配合验证

　　针对Enums和Select(src/components/chart/Select2.vue)验证：

// 自定义 Enmus 验证
Validator.extend('enums', {       // extend的第一个参数就是自定义的规则的名字
  validate: value => value > 0 && value != null && value != undefined    // validate是验证规则，返回一个布尔值或promise
});

// 自定义 Select2 验证
Validator.extend('select2', {       // extend的第一个参数就是自定义的规则的名字
  getMessage: field => field + '不能为空',
  validate: value => value > 0 && value != null && value != undefined    // validate是验证规则，返回一个布尔值或promise
});

　　针对 Datepicker 验证：

// 自定义时间区间选择组件 Datepicker 验证 -- 起止时间验证
Validator.extend('datepickerwrongrange', {
  getMessage: field => '起止时间不能相等',
  validate: function (value) {
    var d = value.split('-');
    var beginTime = parseInt(d[0]);
    var endTime = parseInt(d[1]);
    if(beginTime == endTime) {
      return false;
    }
    else {
      return true;
    }
  }
});

// 自定义时间区间选择组件 Datepicker 验证 -- 开始时间验证
Validator.extend('datepickerwrongbegin', {
  getMessage: field => '开始时间不能小于当前时间后的一小时',
  validate: function (value) {
    var d = value.split('-');
    var beginTime = parseInt(d[0]);
    var endTime = parseInt(d[1]);
    if(beginTime <= (Date.parse(new Date()) + 3600*1000)) {
      return false;
    }
    else {
      return true;
    }
  }
});