vue 校验插件 veeValidate使用

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

如：ip：<input v-validate="'required|ip'" name="ip" type="text" placeholder="输入内容为ip格式">

2、自定义的校验规则

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

手机号：

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

邮箱：

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

密码：

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

验证码

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

身份证号

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

3、常用的自定义校验

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

    export function getForm(form) {
    let myform=document.getElementById(form)
    let formData = new FormData(myform),
        getValue = formData.entries(),
        serializeObj ={};
    for (let pair of getValue) {
        if (serializeObj[pair[0]]) {
            if (Array.isArray(serializeObj[pair[0]])) {
                serializeObj[pair[0]].push(pair[1]);
            } else {
                serializeObj[pair[0]] = [
                    serializeObj[pair[0]], pair[1]];
            }
        } else {
            serializeObj[pair[0]] =pair[1];
        }
    }
    return serializeObj;
};
 
export function getUrl(url) {
    var mock=true;
    let getUrl=!mock ? '' + url + '.shtml' : '/static/mock' + url + '.json';
    return getUrl;
};
 
 this.$validator.validateAll().then((result) => {
              if (result) {
              var formData=getForm("updapass");
              this.$http.get(getUrl('/base/checkLogin'),{params: formData})
              .then( response => {
                    if(response.data.status == 0){
                      this.loginData=response.data.data;
                    }
                }
              )
              .catch(function (response) {
                  console.log(response);
              });
                alert('表单提交了');
                console.log(this.password);
                return;
              }
              alert('请填写正确的信息');
            });

参考：https://segmentfault.com/a/1190000011296437

http://blog.csdn.net/weixin_39107093/article/details/78584059

IE问题：有些表单校验 在ＩＥ中会默认校验　　需要给元素绑定ｖ－ｍｏｄｅｌ　

如ｄａｔａ中写入ｃｏｄｅ：＂＂，标签上写入ｖ－ｍｏｄｅｌ＝＂ｃｏｄｅ＂