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;
    }
});