vue表单验证，vee-validate自定义用法

element-ui使用的验证库是validator，一个下载量非常大的验证库，非常方便
参考https://www.npmjs.com/package/validator
或参考element-ui form表单验证部分的使用

这里介绍一款vue专用验证库，下载量也很大，叫做vee-validate
下面是全局引用和使用方式

安装：
npm i vee-validate

全局引入，main.js
import { ValidationProvider,localize } from "vee-validate/dist/vee-validate.full";
import zh_CN from 'vee-validate/dist/locale/zh_CN.json';
localize("zh_CN",zh_CN); //表示使用中文提示错误信息
Vue.component("ValidationProvider", ValidationProvider);

使用案例

          
            
            {{ errors[0] }}
          
 

使用ValidationProvider 包裹需要校验的输入项目即可
参考官网[https://logaretm.github.io/vee-validate/](https://logaretm.github.io/vee-validate/)
可翻译成中文阅读

旧版本自定义的用法
首先定义一个本地字段，组件初始化时加载
在要校验的字段上加name属性，name属性值和本地字段值保持一致
在要校验的字段上加入v-validate="{}"字符串对象
在要校验的字段下方加上错误提示语
在需要校验的逻辑里，加入校验方法，只有通过校验才可以继续，例：

{{errors.first('realName')}}

rules() {
    const dict = {
            custom: {
            realName: {
            required: "请输入姓名",
            regex: "请输入合法的姓名"
                }
            }
        };
    this.$validator.localize("en", dict);
}

created() {
    this.rules();
}

methods里面需要使用时
toNextStep() {
    this.$validator.validate().then(valid => {
        if (valid) {
            BIN.getBankBin(this.cardId).then(res => {
                console.log(res)
                }).catch(err => {
                Toast("银行卡输入有误或暂不支持，请重新输入");
                 })
            }
        });
},

this.$validator.validate().then方法里面
validate()括号里，如果不传参数，就是需要校验全部
validate(“telphone”)传一个字符串，就是校验telphone这一个规则
如果想要校验多个，需这样做
1. 笨方法，嵌套，在每一个通过验证里面去做下面的事
2. 

required: "请输入银行卡号",
numeric: "银行卡号只能为数字哦",
min: "卡号至少为16位哦",
max: "卡号最多为19位哦",
regex:自定义正则部分，比如手机号不正确

vee-validate自定义规则，一些字段的固定写法，包括正则
姓名：可以包含汉字和字母
v-validate="{required:true,regex:/^[a-zA-Z\u4e00-\u9fa5]+$/}"

银行卡号：最少16位，最多19位，只能是数字
v-validate="{required:true,numeric:true,min:16,max:19}"

手机号：11位
v-validate="{required:true, regex:/^(1(3|4|5|6|7|8|9)[0-9]\d{8})$/}"

身份证号：15位或18位数字，或17位数字+字母
v-validate="{required:true,regex:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,alpha_num:true,max:18}"

只可输入数字：/[^\d]/g

表单里面可以配合maxlength来使用，效果更好。

vue校验数据的写法

applyNumInput () {
      let reg = /[^\d]/g   //只能输入数字正则
      this.applyNum = this.applyNum.replace(reg, '')
}