使用方式
1. 引入插件
typescript
import { validation, ValidationResultType } from '@/uni_modules/ucs-form-validation/index.uts'2. 定义表单数据和验证规则
typescript
// 表单数据
const formData = {
username: 'admin',
mobile: '13800138000',
email: 'test@example.com',
age: '18'
}
// 验证规则
const rules = {
username: [
{ required: true, message: '用户名不能为空' },
{ min: 3, message: '用户名长度不能小于3' },
{ max: 20, message: '用户名长度不能大于20' }
],
mobile: [
{ required: true, message: '手机号不能为空' },
{ mobile: true, message: '手机号格式不正确' }
],
email: [
{ required: true, message: '邮箱不能为空' },
{ email: true, message: '邮箱格式不正确' }
],
age: [
{ required: true, message: '年龄不能为空' },
{ integer: true, message: '年龄必须是整数' },
{ egt: 18, message: '年龄必须大于等于18岁' }
]
}3. 执行验证
typescript
// 执行验证
const result: ValidationResultType = validation(formData, rules)
if (result.result) {
console.log('验证通过')
} else {
console.log('验证失败:', result.error)
console.log('详细错误:', result.detail)
}自定义验证器
插件支持通过 validator 属性定义自定义验证函数:
typescript
const rules = {
username: [
{
validator: (value: any): boolean => {
// 自定义验证逻辑
const str = value as string
// 用户名只能包含字母、数字和下划线
return /^[a-zA-Z0-9_]+$/.test(str)
},
message: '用户名只能包含字母、数字和下划线'
}
]
}API 说明
validation(formData, rules)
完整表单验证函数
参数:
formData: 表单数据对象rules: 验证规则对象
返回值:
typescript
type ValidationResultType = {
result : boolean; // 验证结果,true表示通过
error : string[]; // 错误消息数组
detail : UTSJSONObject; // 详细错误信息,按字段分组
};使用示例:
typescript
import { validation, ValidationResultType } from '@/uni_modules/ucs-form-validation/index.uts'
// 表单数据
const formData = {
username: 'admin',
mobile: '13800138000',
email: 'test@example.com',
age: '18'
}
// 验证规则
const rules = {
username: [
{ required: true, message: '用户名不能为空' },
{ min: 3, message: '用户名长度不能小于3' },
{ max: 20, message: '用户名长度不能大于20' }
],
mobile: [
{ required: true, message: '手机号不能为空' },
{ mobile: true, message: '手机号格式不正确' }
],
email: [
{ required: true, message: '邮箱不能为空' },
{ email: true, message: '邮箱格式不正确' }
],
age: [
{ required: true, message: '年龄不能为空' },
{ integer: true, message: '年龄必须是整数' },
{ egt: 18, message: '年龄必须大于等于18岁' }
]
}
// 执行验证
const result: ValidationResultType = validation(formData, rules)
if (result.result) {
console.log('验证通过')
} else {
console.log('验证失败:', result.error)
console.log('详细错误:', result.detail)
}validationSingle(value, rule)
单字段验证函数
参数:
value: 需要验证的值rule: 验证规则数组
返回值:
typescript
type ValidationSingleResultType = {
result : boolean; // 验证结果
error : string[]; // 错误消息数组
};使用示例:
typescript
import { validationSingle, ValidationSingleResultType } from '@/uni_modules/ucs-form-validation/index.uts'
// 验证单个字段
const username = 'admin';
const usernameRules = [
{ required: true, message: '用户名不能为空' },
{ min: 3, message: '用户名长度不能小于3' },
{ max: 20, message: '用户名长度不能大于20' }
];
const result: ValidationSingleResultType = validationSingle(username, usernameRules);
if (result.result) {
console.log('用户名验证通过');
} else {
console.log('用户名验证失败:', result.error);
}注意事项
- 所有验证规则都支持
message属性来自定义错误提示信息 - 验证规则可以组合使用,按照数组顺序依次验证
- 自定义验证器函数接收原始值作为参数,需返回布尔值表示验证结果