更新记录

1.0.01（2024-07-31） 下载此版本

导出类型供使用；

import type { FormRules } from '@/js_sdk/a-hua-validate'; import type { FormRules } from '@/js_sdk/a-hua-validate/uni'; import type { FormRules, WebShowToastOptions } from '@/js_sdk/a-hua-validate/web'; import type { FormRules, WebShowToastOptions, ...... } from '@/js_sdk/a-hua-validate/type';

1.0.0（2024-05-05） 下载此版本

初体验

平台兼容性

validate 验证

Usage

/** 返回错误信息 */
import validate from '@/js_sdk/a-hua-validate';

validate(
    { name: '', age: '' },
    {
        name: [
            { required: true, message: '姓名不能为空' }, 
            { min: 5, message: '姓名字符不应超过 5个 字符' }
        ],
        age: { required: true, message: '年龄不能为空' }
    }
);

/** 返回错误信息 */
// import { FormRules } from '@/js_sdk/a-hua-validate/type';
import validate, { FormRules } from '@/js_sdk/a-hua-validate';

/** 校验配置 */
const rules: FormRules = {
    name: [
        { required: true, message: '姓名不能为空' }, 
        { min: 5, message: '姓名字符不应超过 5个 字符' }
    ],
    age: { required: true, message: '年龄不能为空' }
};

validate({ name: '', age: '' }, rules);

/** 使用 uni.showToast 提示错误信息 */
import validate from '@/js_sdk/a-hua-validate/uni';

validate(
    { name: '', age: '' },
    {
        name: [
            { required: true, message: '姓名不能为空' }, 
            { min: 5, message: '姓名字符不应超过 5个 字符' }
        ],
        age: { required: true, message: '年龄不能为空' }
    },
    UniAppShowToastOptions = {} // uni.showToast 参数
);

/** 使用 uni.showToast 提示错误信息 */
// import { FormRules } from '@/js_sdk/a-hua-validate/type';
import validate, { FormRules } from '@/js_sdk/a-hua-validate/uni';

/** 校验配置 */
const rules: FormRules = {
    name: [
        { required: true, message: '姓名不能为空' }, 
        { min: 5, message: '姓名字符不应超过 5个 字符' }
    ],
    age: { required: true, message: '年龄不能为空' }
};

validate(
    { name: '', age: '' },
    rules,
    {} as UniApp.ShowToastOptions // uni.showToast 参数
);

/** 自定义 showToast 提示错误信息 */
import validate from '@/js_sdk/a-hua-validate/web';

validate(
    { name: '', age: '' },
    {
        name: [
            { required: true, message: '姓名不能为空' }, 
            { min: 5, message: '姓名字符不应超过 5个 字符' }
        ],
        age: { required: true, message: '年龄不能为空' }
    },
    WebShowToastOptions = {} // showToast 参数
);

/** 自定义 showToast 提示错误信息 */
// import { FormRules, WebShowToastOptions } from '@/js_sdk/a-hua-validate/type';
import validate, { FormRules, WebShowToastOptions } from '@/js_sdk/a-hua-validate/web';

/** 校验配置 */
const rules: FormRules = {
    name: [
        { required: true, message: '姓名不能为空' }, 
        { min: 5, message: '姓名字符不应超过 5个 字符' }
    ],
    age: { required: true, message: '年龄不能为空' }
};

validate(
    { name: '', age: '' },
    rules,
    {} as WebShowToastOptions // showToast 参数
);

Options

UniAppShowToastOptions

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

WebShowToastOptions

Use Rule

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

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

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

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

max 最大值，规则同 min 参数

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

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

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

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

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

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

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

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

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

Contact

• 欢迎大家提供建议

Enjoy!