更新记录

1.0.0（2024-05-05）

初体验

平台兼容性

validate 验证

Usage

/** 返回错误信息 */
import validate from '@/js_sdk/a-hua-validate';
validate(
    { name: '', age: '' },
    [
        name: [
            { rule: 'required', msg: '姓名不能为空' }, 
            { len: 5, msg: '姓名字符不应超过 5个 字符' }
        ],
        age: { rule: 'required', msg: '年龄不能为空' }
    ]
);

/** 使用 uni.showToast 提示错误信息 */
import validate from '@/js_sdk/a-hua-validate/uni';
validate(
    { name: '', age: '' },
    [
        name: [
            { rule: 'required', msg: '姓名不能为空' }, 
            { len: 5, msg: '姓名字符不应超过 5个 字符' }
        ],
        age: { rule: 'required', msg: '年龄不能为空' }
    ],
    uniShowToastOptions // uni.showToast 参数
);

/** 自定义 showToast 提示错误信息 */
import validate from '@/js_sdk/a-hua-validate/web';
validate(
    { name: '', age: '' },
    [
        name: [
            { rule: 'required', msg: '姓名不能为空' }, 
            { len: 5, msg: '姓名字符不应超过 5个 字符' }
        ],
        age: { rule: 'required', msg: '年龄不能为空' }
    ],
    showToastOptions // showToast 参数
);

Options

uniShowToastOptions

• icon：图标；
• duration：提示的延迟时间，单位毫秒；
• mask：是否显示透明蒙层，防止触摸穿透；
• image：自定义图标的本地路径（app端暂不支持gif）；
• position：纯文本轻提示显示位置，填写有效值后只有 title 属性生效，且不支持通过 uni.hideToast 隐藏
• fail：调用失败的回调函数；
• success：调用成功的回调函数；
• complete：调用结束的回调函数（调用成功、失败都会执行）；

showToastOptions

Use Rule

每一个验证规则中，可以配置多个属性，下面对常用的属性进行讲解，更具体的可以查看 async-validator 的文档说明：

type string 内置校验规则，如这些规则无法满足需求，可以使用正则匹配、或者使用validator自定义方法验证规则。

• string：string 类型
• number：number 类型
• boolean：boolean 类型
• method：function 类型
• regexp：regexp 类型，这里的正则，指的是判断字段的内容是否一个正则表达式，而不是用这个正则去匹配字段值
• integer：整数类型
• float：浮点数类型
• array：array 类型
• object：object 类型
• enum：须出现在 enmu 指定的值中
• date：date 类型
• url：url 类型
• hex：16 进制类型
• email：email 类型
• required boolean，是否必填
• pattern 要求此参数值为一个正则表达式，如： /\d+/，不能带引号，如："/\d+/"，组件会对字段进行正则判断，返回结果。

min 最小值，如果字段类型为字符串和数组，会取字符串长度与数组长度 length 与 min 比较，如果字段是数值，则直接与 min 比较。

max 最大值，规则同 min 参数

len 指定长度，规则同 min，优先级高于 min 和 max

enum Array 指定的值，配合 type: 'enum' 使用

whitespace boolean 设置该值为 true，如果字段值内容都为空格，默认无法通过 required: true 校验

transform (value: unknown) => unknown，校验前对值进行转换，函数的参数为当前值，返回值为改变后的值，参数如：value：当前校验字段的值

message 校验不通过时的提示信息

validator function：自定义同步校验函数，参数如下：

• rule：当前校验字段在 rules 中所对应的校验规则
• value：当前校验字段的值
• callback：校验完成时的回调，一般无需执行callback，返回true(校验通过)或者false(校验失败)即可

asyncValidator function：自定义异步校验函数，参数如下：

• rule：当前校验字段在 rules 中所对应的校验规则
• value：当前校验字段的值
• callback：校验完成时的回调，执行完异步操作(比如向后端请求数据验证)，如果不通过，需要callback(new Error('提示错误信息'))，如果校验通过，执行callback()即可

Contact

• 欢迎大家提供建议
• wx：_____ahua
• phone：15850531310
• email：cvsq@icloud.com