- 校验规则 Rules
- 基本用法
- 示例代码
- 校验规则属性 (Rules Attributes)
- 内置校验类型 (Type Value)
- 监听校验事件
- 基本用法
校验规则 Rules
表单组件的校验规则
基本用法
校验的功能需要配合林间有风提供的表单组件使用。
在表单项上设置 rules 属性,rules 接收一个数组或者对象;
当失去焦点时触发校验事件,可通过 linvalidate 事件监听校验结果;
此外,还提供了三种错误提示的方式:message 、 toast 和 text ,通过设置 tipType的值为 message 或 toast 或 text 开启提示信息。
示例代码
<l-input label="邮箱" placeholder="请输入邮箱" label-width="170"name="email" rules="{{emailRules}}" /><l-input label="用户名" placeholder="请输入用户名" label-width="170"name="user" rules="{{userRules}}" />
data: {userRules: [{required: true},{min: 2,max: 5,message: '长度需要在2-3个字符之间'}],emailRules: {type: 'email',required: true}},
校验规则属性 (Rules Attributes)
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| enum | 枚举类型 | String | - | - |
| len | 字段长度 | Number | - | - |
| max | 最大长度 | Number | - | - |
| message | 校验错误提示文案 | String | - | - |
| min | 最小长度 | Number | - | - |
| pattern | 正则表达式校验 | String | - | - |
| required | 是否必选 | Boolean | - | false |
| type | 内建校验类型 | String | 见下表 | string |
| whitespace | 必选时,空格是否会被视为错误 | Boolean | - | false |
更多高级用法可研究 async-validator
TIP
提示:pattern属性的值需是 String,传入正则时,微信小程序不识别,会导致传入的 pattern 是个空的对象。
内置校验类型 (Type Value)
| 参数 | 说明 |
|---|---|
| string | 字符串 |
| number | 数字 |
| boolean | 布尔 |
| method | 方法 |
| regexp | 正则 |
| integer | 整数 |
| float | 浮点数字 |
| array | 数组 |
| object | 对象 |
| enum | 枚举类型,值必须存在 enum 中 |
| date | 日期 |
| url | 网址 |
| 邮箱 | |
| hex | 16进制 |
监听校验事件
| 事件名称 | 说明 | 返回值 | 备注 |
|---|---|---|---|
| bind:linvalidate | 监听校验结果 | {error,isError} | - |
