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

verify-plugin

v0.0.9

Published

vue validate plugin

Downloads

12

Readme

verify

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

  • NPM: https://www.npmjs.com/package/@mvpleung/verify
  • GitHub: https://github.com/mvpleung/vue-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分组
v - verify.teacher;
//自定义student分组
v - 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());
    }
  }
};