vue-verify
vuejs 表单校验组件
安装
``` npm install @mvpleung/verify ```配置
```js import vueVerify from '@mvpleung/verify'; Vue.use(vueVerify, { trigger: String, //触发校验事件,默认为全部,'blur', 'change' msgbox: Function, //自定义消息提示框 scrollToEl: true, //是否滚动到校验的Dom节点 offsetTop: Number, //滚动偏移量,配合 scrollToEl 使用 multiple: false //是否支持批量校验 }); ```如何使用
```vue<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>
```
指令说明
v-verify
参数为数组
- 对象格式规则配置
test: [String, Function(value), RegExp], //校验规则,String: 默认定义的规则
message: String, //自定义错误提示
trigger: String //出发校验事件,['blur', 'change']
}
;
```
- 符串格式规则配置(默认校验规则)
- 混合格式规则
test: [String, Function(value), Test], //校验规则,String: 默认定义的规则, Test 为正则
message: String, //自定义错误提示
trigger: String //出发校验事件,['blur', 'change']
},
'required|mobile'
;
```
v-remind
用于校验字段的错误提示,参数类型为 String, Model,需要提示的字段名,可以传递 String 或者 this 可访问的属性```js ```
方法说明
- $verify.config
- (Boolean) $verify.validate
String
校验字段名
- rule? [String, Array]
校验规则,非必填,默认读取 v-verify 配置规则
- validOnly? Boolean
是否仅作为校验,不提示错误信息,非必填
- (Boolean) $verify.check
String
校验组名,非必填
- validOnly? Boolean
是否仅作为校验,不提示错误信息,非必填
- (String/Array) $verify.errors
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}的整数倍
|