vee-validate安装及如何使用

1.安装

  npm install vee-vaildate@next --save 

2.在main.js中引入

 import VeeValidate from 'vee-validate';

3.引入中文（依旧在main.js中）

 import zh_CN from 'vee-validate/dist/locale/zh_CN' import { Validator } from 'vee-validate'; Validator.addLocale(zh_CN); Vue.use(VeeValidate,{    local:'zh_CN',    delay:'1000',    })

4.接着3.的Vue.use 里的其他配置：

const config = {  errorBagName: 'errors',   fieldsBagName: 'fields',  delay: 0,  //错误提示的延迟时间  locale: 'zh_CN',  //对语言（中文）的配置  strict: true,  //没有设置规则的表单不进行校验，  enableAutoClasses: false,  classNames: {    touched: 'touched', // the control has been blurred    untouched: 'untouched', // the control hasn't been blurred    valid: 'valid', // model is valid    invalid: 'invalid', // model is invalid    pristine: 'pristine', // control has not been interacted with    dirty: 'dirty' // control has been interacted with  },  events: 'blur',  //**input|blur** 在用户输入和表单失去焦点时都进行校验 可单独写  blur或input  inject: true};*可以参考官网：(http://vee-validate.logaretm.com/index.html#configuration)*

5.自定义内置的提示信息

const dictionary = {  zh_CN: {    messages: {      email: () => '邮箱格式不正确哦',      required:()=>'这是必须要填的'    }  }};Validator.updateDictionary(dictionary);

6.运用
这个时候其实已经可以使用了，线上demo

<div>     <label for='email'>邮箱：</label>     <input v-validate="'required|email'" type="text" id='email' name='myEmail'></div><span v-show="errors.has('myEmail')">{{errors.first('myEmail')}}</span>*解释一下：v-vaildate后面的required和email是官方已经规定好的几种默认的错误类型中的两种，这个可以阅读官方文档。*

7.内置的校验规则

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

7.自定义的校验规则

Validator.extend('qq', {  messages: {    zh_CN:field => 'qq号码输入不正确'  },  validate: value => {    return /^[1-9][0-9]{4,14}$/.test(value);  }});

8.自己项目中使用的一些常用的自定义校验规则

const dictionary = {    zh_CN: {        messages: {            required: (field) => "×请输入您的" + field,        },        attributes: {            realName: '真实姓名',            idCard: '身份证',            bank: '银行',            region: '开户行地址',            bankNo: '银行卡号',            reBankCode: '确认卡号',            oldPayPass: '原交易密码',            payPass: '交易密码',            rePayPass: '确认密码',            oldPwd: '原登录密码',            newPwd: '登录密码',            password: '登录密码',            sure: '确认密码',            code: '验证码',            email: '邮箱',            mobile: '手机号',            emailcode: '验证码'        }    }};Validator.updateDictionary(dictionary);

<1>手机号

Validator.extend('mobile', {    messages: {        zh_CN: (field) => '×手机号不正确！'    },    validate: (value) => {        return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value);    }});

<2>邮箱

Validator.extend('email', {    messages: {        zh_CN: (field) => '×请填写有效邮箱地址'    },    validate: (value, arg) => {        return /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value);    }});

<3>密码

Validator.extend('password', {    messages: {        zh_CN: field => '×请设置6-16位数字、字母登录密码'    },    validate: value => {        return /^[0-9A-Za-z]{6,20}$/.test(value);    }});

<4>验证码

Validator.extend('code', {    messages: {        zh_CN: field => '×请输入正确的验证码'    },    validate: value => {        return /[0-9]{6}/.test(value);    }});

<5>身份证号码

Validator.extend('idCard', {    messages: {        zh_CN: (field) => '×身份证号码不正确！'    },    validate: (value) => {        var city = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外 " };        var pass = true;        if (!value || !/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value)) {            pass = false;        } else if (!city[value.substr(0, 2)]) {            pass = false;        } else {            //18位身份证需要验证最后一位校验位            if (value.length == 18) {                value = value.split('');                //∑(ai×Wi)(mod 11)                //加权因子                var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];                //校验位                var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];                var sum = 0;                var ai = 0;                var wi = 0;                for (var i = 0; i < 17; i++) {                    ai = value[i];                    wi = factor[i];                    sum += ai * wi;                }                var last = parity[sum % 11];                if (parity[sum % 11] != value[17]) {                    pass = false;                }            }        }        return pass;    }});