文章标题

verify.js是一个vue插件，用于表单验证。
该插件包含两个指令v-verify与v-check，以及一些添加在表单项元素上的属性值，来完成校验规则配置 ->进行校验 ->错误提示->打包通过校验的数据这四步。

一、开始

import Verify from 'components/verify';
Vue.use(Verify,{
    // errTip【必传】，而且需要是一个Function，用于定义规则错误时弹出的提示形式。
    errTip(errMsg) {
        //这里使用了饿了么的提示组件，可以根据需要换成其他
        let _vue = new Vue();
        _vue.$notify.error({
              title: '错误',
              message: errMsg
        });
    },
    // addOptionList【选传】，为对象，形式如下，用于添加可选规则，从这里添加后，在v-verify指令中的optionRule就可以使用。
    addOptionList : {
        // 注意命名开头大写+驼峰
        IdCard : {
            reg : /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            errMsg : '身份证号码为15位或者18位'
        }
    }
});

二、校验规则配置

• v-verify指令
  将v-verify添加在表单项元素中（如input、select），然后按需进行配置，即可完成校验规则的配置。它的完整形式为：v-verify:fieldName.optionRule=”customRule”。

参数	说明	可选值	类型	必填
fieldName	字段名。通过校验打包出来的数据的字段名。跟需要传给后台的字段名一致即可。	-	String	是
optionRule	可选校验规则。	UserName、Password、Mobile等（命名开头大写+驼峰）	String	否
customRule	自定义校验规则。自定义验证规则数组里，可传多个规则(类型是对象)。	-	Array	否

关于customRule 的特别说明，customRule 需按照这样的格式传进去：

[
    {   
        type : 'Function',
        typeVal : 'checkDepartment',
        errMsg : '自定义checkDepartment报错'
    }，
    {   
        type : 'Reg',
        typeVal : /^[A-Za-z0-9]+$/,
        errMsg : '登录账号只能输入英文或数字'
    }
]

customRule是一个数组，里面可以传多条规则，每条规则都是一个对象，这个规则对象包含三个属性：type（规则类型）、typeVal（与规则类型对应的值见下表） 、errMsg （与规则类型对应的错误提示）

type	typeVal
NonEmpty	【Boolean】true/false
Reg	【正则字面量】/^[A-Za-z0-9]+$/
Function	【String】方法名，如‘test’，则可以在实例的methods中写一个test函数用于验证，返回值必须为Boolean
LimitMin	【String】最小长度
LimitMax	【String】最大长度
Limit	【Array】[最小长度,最大长度]

• 属性值
  将属性值添加在表单项元素中，相当于可选校验规则。目前可添加的属性值有：

参数	说明	必填
tag	该表单项的名字，用于错误提示。	建议都填上，因为比如非空验证错误提示是tag+’不能为空’这样的形式展示的。
minLength	最小长度	否
maxLength	最大长度	否

三、进行校验

• v-check指令
  将v-check添加在提交的元素上，随即进行对所有表单项的校验。校验顺序跟表单项在Dom中的位置一致。
• 校验规则说明

该插件有三种校验规则，默认校验规则、可选校验规则、自定义校验规则。它们间的优先级原则是默认校验规则 < 可选校验规则 < 自定义校验规则，相同type（如type：reg）的规则，优先级大的会覆盖小的。经过这样原则的合并，最终会产生形如下图的规则集合，报错的时候就会按顺序报错。

1. 默认校验规则：插件自带的默认规则，现有的默认校验规则是“非空校验”，即默认存在一个type为“NonEmpty”的校验规则。可以通过在v-verify指令中的optionRule中添加“CanEmpty”来取消该默认规则的验证。如v-verify:userName.UserName.CanEmpty，这时当用户没有输入东西的时候，会跳过默认的非空校验和UserName校验，当输入了东西的时候，才进行UserName校验。
2. 可选校验规则：插件内自带一些可选的校验规则，并且可以通过在Vue.use()时添加addOptionList 拓展。可选校验规则的type都是reg，所以如果存在多个可选规则并且他们的type都是reg的话，写在后面的规则会覆盖前面的规则。
3. 自定义校验规则：可以通过自定义校验规则对原有的规则重写。比如默认规则“NonEmpty”，他的错误提示errMsg为“此处不能为空”。那么我们可以通过自定义校验规则去重写errMsg：

v-verify:fieldName="[
    {   
        type : 'NonEmpty',
        typeVal : true,
        errMsg : '自定义NonEmpty报错'
    }
]"

四、打包通过校验的数据
所有表单项通过验证后，可以通过$afterVerifyPass方法接收打包后的数据。

export default {
    methods : {
        $afterVerifyPass(data) {
            console.log(data);
        }
    }
}
/*最终data为
    {
        account:"541236845",
        contact:"13568745123",
        department:"我是部门",
        enableFlg:"有效",
        userName:"yyyoo"
    }
*/

五、完整例子

<label>
    状态
    <select v-verify:enableFlg tag="状态">
        <option value="">请选择状态</option>
        <option value="有效">有效</option>
        <option value="无效">无效</option>
    </select>
</label>
<label style="margin-top:20px">
    姓名
    <input type="text" placeholder="请输入姓名(可选)" 
           v-verify:userName.UserName.CanEmpty tag="姓名">
</label>
<label style="margin-top:20px">
    部门
    <input type="text" placeholder="请输入部门"
           v-verify:department="[
                {   
                    type : 'Function',
                    typeVal : 'checkDepartment',
                    errMsg : '自定义checkDepartment报错'
                }
           ]" tag="部门">
</label>
<label style="margin-top:20px">
    登录账号
    <input type="text" placeholder="请输入登录账号"
           v-verify:account="[
                {   
                    type : 'Reg',
                    typeVal : /^[A-Za-z0-9]+$/,
                    errMsg : '登录账号只能输入英文或数字'
                }
           ]" tag="登录账号">
</label>
<button v-check>提交<button>