Skip to content

使用方式

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);
}

注意事项

  1. 所有验证规则都支持 message 属性来自定义错误提示信息
  2. 验证规则可以组合使用,按照数组顺序依次验证
  3. 自定义验证器函数接收原始值作为参数,需返回布尔值表示验证结果