verify-plugin

    0.0.9 • Public • Published

    verify

    此分支已不再维护,请查看新版

    install

    npm install verify-plugin
    

    use

    <template>
        <div class="input-box clearFix">
            <div>
                <input v-model="age" v-verify="age" placeholder="age"/>
                <label class="fl" v-remind="age"></label>
            </div>
            <!-- 对象字面量用法,参考指令说明 -->
            <div>
                <input v-model="age" v-verify="{rule: 'age'}" placeholder="age"/>
                <label class="fl" v-remind="{field: 'age', error: ['自定义错误提示,按定义规则顺序取值']}"></label>
            </div>
            <div>
                <input type="text" class="phoneIcon fl" placeholder="手机号码" v-model="regInfo.phone" v-verify="regInfo.phone">
                <label class="fl" v-remind="regInfo.phone"></label>
            </div>
            <button v-on:click="submit">提交</button>
        </div>
    </template>
     
    <script>
    import Vue from 'vue';
    import verify from 'verify-plugin';
    Vue.use(verify, {
      blur: true
    });
    export default {
      name: 'app',
      data() {
        return {
          age: '',
          regInfo: {
            phone: ''
          },
          verifyCode: '',
          idNumber: 0
        };
      },
      verify: {
        age: 'required',
        regInfo: {
          phone: ['required', 'mobile']
        },
        verifyCode: [
          {
            test: 'required',
            message: 'verifyCode不能为空' //自定义提示
          },
          {
            minLength: 4,
            message: 'verifyCode 最少四位' //可不定义,使用默认提示
          },
          {
            maxLength: 6,
            message: 'verifyCode 最长六位'
          }
        ],
        idNumber: [
          {
            test: 'required',
            message: 'idNumber不能为空' //自定义提示
          },
          {
            min: 10 //定义数字最小值,默认提示 “请输入一个大于等于10的数字”
          },
          {
            max: 1000,
            message: 'idNumber 最大为 1000'
          },
          {
            base: 10,
            message: 'idNumber 必须被 10 整除'
          }
        ]
      },
      methods: {
        submit: function() {
          console.log(this.$verify.check());
        }
      }
    };
    </script>

    验证错误信息说明

    验证之后的错误存储在 vm.$verify.$errors 中,可自行打印出 vm.$verify.$errorArray 存储上一次验证的错误

    配置说明

    {
        rules:{}//自定义验证方法
        blur:Bool //失去焦点时 是否开启验证
        msgbox: Function, //自定义消息提示框
        force: Bool, //是否强制使用 msgBox
        scrollToEl: Bool, //是否滚动到校验的Dom节点
        field: { //针对输入框的单独配置
            msgbox: Bool, //输入框单独校验时是否使用 msgBox
            offsetTop: Number //滚动偏移量,配合 scrollToEl 使用
        },
        multiple: Bool //是否支持批量校验
    }

    自定义属性说明

    [data-verify]

    {
        blur: Bool, //是否支持 blur 校验
        replace: Object, //v-model 校验键名替换项,比如 v-model="a[index].c" with replace:{index:1} => v-model="a[1].c"
        ignore: Bool, //是否忽略当前校验,用于动态操作校验逻辑,比如条件下的动态忽略
        error: Array //自定义错误提示,按定义规则顺序取值
    }

    指令说明

    v-verify

    在表单控件元素上创建数据的验证规则,他会自动匹配要验证的值以及验证的规则。

    v-verify 指令支持对象字面量(覆盖自定义属性)
    {
        rule: 'require', //校验规则,仅支持字符串
        blur: Bool, //是否支持 blur 校验
        replace: Object, //v-model 校验键名替换项,比如 v-model="a[index].c" with replace:{index:1} => v-model="a[1].c"
        ignore: Bool, //是否忽略当前校验,用于动态操作校验逻辑,比如条件下的动态忽略
        error: Array //自定义错误提示,按定义规则顺序取值
    }
    v-verify 修饰符说明

    该指令最后一个修饰符为自定义分组

    //自定义teacher分组
    - verify.teacher;
    //自定义student分组
    - verify.student;
     
    //验证时可分开进行验证
     
    //验证student 分组
    this.$verify.check('student');
    //验证teacher 分组
    this.$verify.check('teacher');
    //验证所有
    this.$verify.check();
    v-verify 指令也可使用 arg 参数进行验证分组

    如果同时使用修饰符和 arg 分组 则 arg 会覆盖修饰符分组**

    v-verify:student
    //验证student 分组
    this.$verify.check("student")
    v-remind 指令支持对象字面量(覆盖自定义属性)
    {
        field: 'code', //校验提示字段,仅支持字符串
        blur: Bool, //是否支持 blur 校验
        replace: Object, //v-model 校验键名替换项,比如 v-model="a[index].c" with replace:{index:1} => v-model="a[1].c"
        ignore: Bool, //是否忽略当前校验,用于动态操作校验逻辑,比如条件下的动态忽略
        error: Array //自定义错误提示,按定义规则顺序取值
    }
    v-remind 修饰符说明

    .join 展示所有错误 用逗号隔开

    方法说明

    config

    自定义配置,此配置会覆盖全局配置,仅在当前页面有效

    this.$verify.config(options)

    validate

    单独校验某个字段 field: 字段名,rule:校验规则(可空,默认取配置规则),validOnly:是否仅校验值,不弹窗提示

    this.$verify.validate(field, rule, validOnly)

    check

    校验配置了 v-verify 指令得所有字段,group:组名(参考指令说明中的分组,可空),validOnly:是否仅校验值,不弹窗提示

    this.$verify.check(group, validOnly)

    errors

    返回错误列表 field:字段名(为空返回全部错误)

    this.$verify.errors(field)

    默认规则

    默认校验规则

    -email - //邮箱规则验证
    mobile - //手机号码验证
    required - //必填
    url - //链接规则验证
    tel - //固定电话
    fax - //传真号码
    fullname - //不允许含有数字\标点符号(“·”除外),且首位与末位不能为空格,不允许含有汉字又同时含有字母,不小于2个字符
    number - //数字
    integer - //非负整数(正整数和零)
    integerNum - //非负浮点(正浮点数和零)
    positiveInt - //正整数
    positiveNum - //正整数或正浮点数
    address - //地址必须包含汉字,不能连续5个相同字符,最少8个汉字,长度不少于16个字节
    qq - //QQ号码
    wechat - //微信号码
    password - //密码,6-20位英文和数字
    height - //身高
    weight - //体重
    zipNo - //邮编
    bankNo - //银行卡号,16或19位纯数字
    idcard - //身份证号码
    passport - //外国护照,证件号码位数必须为3-20个字符
    passportCN - //中国护照,证件号码位数必须为7-10个字符
    birthCertificate - //出生证 - 字母开头且证件号码位数必须为7-11个字符
    HMMainlandPass - //港澳居民来往内地通行证 - 字母开头且证件号码位数必须为11个字符
    TWMainlandPass - //台湾居民来往大陆通行证 - 8-10个字符
    officersCertificate - //军官证,证件号码必须为10-18个字符
    soldierCard - //士兵证,证件号码必须为10-18个字符
    minLength - //最少minLength个字符
    maxLength - //最多maxLength个字符
    min - //最小 min,结合 number 校验
    max - //最大 max,结合 number 校验
      base; //必须被 base 整除(整数倍)

    行内校验规则

        <input v-verify="phonenumber" v-model="phonenumber" data-verify="{error:['手机号不能为空','请正确输入手机号码']}"/>
        <input v-verify="'required|mobile'" v-model="phonenumber" data-verify="{error:['手机号不能为空','请正确输入手机号码']}"/>
     
     
        <input v-verify="{rule: 'phonenumber', error: ['手机号不能为空','请正确输入手机号码']}" v-model="phonenumber"/>
        <input v-verify="{rule: 'required|mobile', error: ['手机号不能为空','请正确输入手机号码']}" v-model="phonenumber"/>

    自定义验证规则一

    import Vue from 'vue';
    import verify from 'verify-plugin';
    var myRules = {
      max6: {
        test: function(val) {
          if (val.length > 6) {
            return false;
          }
          return true;
        },
        message: '最大为6位'
      }
    };
    Vue.use(verify, {
      rules: myRules
    });
    export default {
      name: 'app',
      data() {
        return {
          age: '',
          teacher: '',
          regInfo: {
            phone: ''
          }
        };
      },
      verify: {
        age: 'required',
        teacher: 'max6',
        regInfo: {
          phone: ['required', 'mobile']
        }
      },
      methods: {
        submit: function() {
          console.log(this.$verify.check());
        }
      }
    };

    自定义验证规则二

    import Vue from 'vue';
    import verify from 'verify-plugin';
     
    export default {
      name: 'app',
      data() {
        return {
          age: '',
          teacher: '',
          regInfo: {
            phone: ''
          }
        };
      },
      verify: {
        age: 'required',
        teacher: [
          {
            test: function(val) {
              if (val.length > 6) {
                return false;
              }
              return true;
            },
            message: '最大为6位'
          }
        ],
        regInfo: {
          phone: ['required', 'mobile']
        }
      },
      methods: {
        submit: function() {
          console.log(this.$verify.check());
        }
      }
    };

    Keywords

    none

    Install

    npm i verify-plugin

    DownloadsWeekly Downloads

    2

    Version

    0.0.9

    License

    ISC

    Unpacked Size

    733 kB

    Total Files

    11

    Last publish

    Collaborators

    • mvpleung