@mvpleung/verify

    0.0.7 • Public • Published

    vue-verify

    vuejs 表单校验组件

    安装

    npm install @mvpleung/verify
    

    配置

    import vueVerify from '@mvpleung/verify';
    Vue.use(vueVerify, {
      trigger: String, //触发校验事件,默认为全部,['blur', 'change']
      msgbox: Function, //自定义消息提示框
      scrollToEl: true, //是否滚动到校验的Dom节点
      offsetTop: Number, //滚动偏移量,配合 scrollToEl 使用
      multiple: false //是否支持批量校验
    });

    如何使用

    <template>
       <div class="input-box clearFix">
          <input
            v-model="name"
            v-verify="[{test: 'required', message: '请输入 name'},{test: 'mobile'}]"
           />
          <input
            v-model="code"
            v-verify="rules.verfifyCode"
           />
           <button v-on:click="next">下一步</button>
       </div>
    </template>
     
    <script>
        export default {
            name: 'app',
            data () {
              return {
                name: '',
                rules: {
                    verfifyCode: [
                      {
                        test: 'required',
                        message: '验证码不能为空'
                      },
                      {
                        test: /^(\+|-)?\d+($|\.\d+$)/,
                        message: '请正确输入验证码'
                      },
                      {
                        minlength: 4,
                        message: '请输入四位验证码'
                      }
                    ]
              }
            },
            methods:{
              next() {
                if (this.$verify.check()) {
                    console.log('verify success');
                }
              }
            }
        }
    </script>

    指令说明

    v-verify

    参数为数组

    • 对象格式规则配置
    [
      {
        test: [String, Function(value), RegExp], //校验规则,String: 默认定义的规则
        message: String, //自定义错误提示
        trigger: String //出发校验事件,['blur', 'change']
      }
    ];
    [
      'required|mobile' //使用默认定义的规则,多条规则以 '|' 分割,不能自定义 message
    ];
    • 混合格式规则
    [
      {
        test: [String, Function(value), Test], //校验规则,String: 默认定义的规则, Test 为正则
        message: String, //自定义错误提示
        trigger: String //出发校验事件,['blur', 'change']
      },
      'required|mobile'
    ];

    v-remind

    用于校验字段的错误提示,参数类型为 [String, Model],需要提示的字段名,可以传递 String 或者 this 可访问的属性

    <lable v-remind="name" />

    方法说明

    • $verify.config

      接收自定义配置,优先级>全局配置

    • (Boolean) $verify.validate 手动校验某个字段值

      • field String 校验字段名
      • rule? [String, Array] 校验规则,非必填,默认读取 v-verify 配置规则
      • validOnly? Boolean 是否仅作为校验,不提示错误信息,非必填
    • (Boolean) $verify.check 校验所有

      • group? String 校验组名,非必填
      • validOnly? Boolean 是否仅作为校验,不提示错误信息,非必填
    • (String/Array) $verify.errors 获取错误提示

      • field? String 需要获取某个字段错误提示时,传递此字段,不传返回全部错误信息

    默认规则

    默认校验规则

    Rule Extra Description
    email 邮箱格式错误
    mobile 手机号码格式不正确
    required 必填
    englishmixing placeholder: 占位符,默认'' 英文+数字混合, ${placeholder}英文+数字混合
    url URL 格式错误
    tel 请正确输入固定电话
    fax 请正确输入传真号码
    fullname 不允许含有数字\标点符号(“·”除外),且首位与末位不能为空格,不允许含有汉字又同时含有字母,不小于 2 个字符
    number 请输入纯数字
    integer 请输入非负整数(正整数和零)
    integerNum 请输入非负浮点数(正浮点数和零)
    positiveInt 请输入正整数
    positiveNum 请输入正整数或正浮点数
    address 必须包含汉字,不能连续 5 个相同字符,最少 5 个汉字,长度不少于 10 个字节
    qq 请正确输入 QQ 号码
    wechat 请正确输入微信号码
    username placeholder: 占位符,默认'' 请正确输入${placeholder}用户名,4-16 位(数字、字母、下划线、减号)
    password 请正确输入密码,6-20 位英文和数字
    height 请正确输入身高
    weight 请正确输入体重
    zipNo 请正确输入邮编
    bankNo 请正确输入银行卡号(10-23 位纯数字)
    date placeholder: 占位符,默认'' 请正确输入${placeholder}日期
    idcard placeholder: 占位符,默认'' 请正确输入${placeholder}身份证号码
    passport placeholder: 占位符,默认'' ${placeholder}证件类型为外国护照,证件号码位数必须为3-20个字符
    passportCN placeholder: 占位符,默认'' ${placeholder}证件类型为中国护照,证件号码位数必须为7-10个字符
    birthCertificate placeholder: 占位符,默认'' 请正确输入${placeholder}出生证
    HMMainlandPass placeholder: 占位符,默认'' 请正确输入${placeholder}港澳居民来往内地通行证
    TWMainlandPass placeholder: 占位符,默认'' 请正确输入${placeholder}台湾居民来往大陆通行证
    officersCertificate placeholder: 占位符,默认'' ${placeholder}证件类型为军官证,证件号码必须为10-18个字符
    soldierCard placeholder: 占位符,默认'' ${placeholder}证件类型为士兵证,证件号码必须为10-18个字符
    taxpayerCode placeholder: 占位符,默认'' ${placeholder}企业税号为15、18、20位数字或大写字母
    base64 placeholder: 占位符,默认'' 请正确输入${placeholder}base64字符串
    platenumber placeholder: 占位符,默认'' ${placeholder}车牌号不正确
    minlength minlength: 最小长度 请输入一个长度最少为${minlength}位的字符
    maxlength maxlength: 最大长度 请输入一个长度最大为${maxlength}位的字符
    min min: 最小值 请输入一个大于等于${min}的数字
    max max: 最大值 请输入一个小于等于${max}的数字
    base base: 整除基数 请输入${base}的整数倍

    License


    LICENSE

    Install

    npm i @mvpleung/verify

    DownloadsWeekly Downloads

    8

    Version

    0.0.7

    License

    MIT

    Unpacked Size

    243 kB

    Total Files

    14

    Last publish

    Collaborators

    • mvpleung