@mvpleung/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

参数为数组

• 对象格式规则配置

```js {

test: [String, Function(value), RegExp], //校验规则,String: 默认定义的规则

message: String, //自定义错误提示

trigger: String //出发校验事件，['blur', 'change']

} ; ```

• 符串格式规则配置（默认校验规则）

```js 'required|mobile' //使用默认定义的规则，多条规则以 '|' 分割，不能自定义 message ; ```

• 混合格式规则

```js {

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

手动校验某个字段值 - 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