vuejs 表单校验组件，支持 blur、change 校验

vue-verify

vuejs 表单校验组件

安装

npm install @mvpleung/verify 配置

import vueVerify from '@mvpleung/verify'; Vue.use(vueVerify, { trigger: String, //触发校验事件，默认为全部，['blur', 'change'] msgbox: Function, //自定义消息提示框 function(msg){} scrollToEl: true, //是否滚动到校验的Dom节点 offsetTop: Number, //滚动偏移量，配合 scrollToEl 使用 multiple: false, //是否支持批量校验 rules: Object //自定义校验规则,e.g.: { custom: {test: /.+@.+\..+/, message: '邮箱格式错误'}, ...} }); 示例

Website at https://mvpleung.github.io/vue-verify/

如何使用

<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" /> <!-- 可以使用 r-remind 提示错误，或者使用 Vue.use({msgbox}) --> <label v-remind="code" /> <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