npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mvpleung/verify

v0.0.7

Published

vue validate plugin

Downloads

7

Readme

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