在开源项目低代码表单FormCreate 中,可以通过 validate 配置项为表单组件设置验证规则。无论是内置的表单组件还是自定义的表单组件,都支持表单校验。本文将详细介绍验证规则的使用方法,并提供一些示例来帮助您更好地理解和应用这些功能。
基本验证规则
validate
配置项允许您为每个表单字段定义多种验证规则。每个规则都是一个对象,您可以通过设置不同的属性来控制验证行为。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
enum | 枚举类型 | string | - |
len | 字段长度 | number | - |
max | 最大长度 | number | - |
message | 校验文案 | string | - |
min | 最小长度 | number | - |
pattern | 正则表达式校验 | RegExp | - |
required | 是否必选 | boolean | false |
transform | 校验前转换字段值 | function(value) => transformedValue:any | - |
type | 内建校验类型,可选项 | string | ‘string’ |
validator | 自定义校验 | function(rule, value, callback) | - |
whitespace | 必选时,空格是否会被视为错误 | boolean | false |
type 需要根据组件的 value 类型定义
常见校验示例
1.必填字段校验
{
type: 'input',
field: 'username',
title: '用户名',
validate: [
{ required: true, message: '用户名是必填项' }
]
}
2.最小长度校验
{
type: 'input',
field: 'password',
title: '密码',
validate: [
{ required: true, min: 6, message: '密码长度不能少于6个字符' }
]
}
3. 正则表达式校验
{
type: 'input',
field: 'phone',
title: '电话号码',
validate: [
{ required: true, message: '请输入电话号码' },
{ pattern: '^1[3-9]\d{9}$', message: '请输入有效的手机号' }
]
}
4. 自定义校验
{
type: 'input',
field: 'age',
title: '年龄',
validate: [
{
validator: (rule, value, callback) => {
if (value < 18) {
callback(new Error('年龄必须大于或等于18岁'));
} else {
callback();
}
},
message: '请输入合法的年龄'
}
]
}
5. 枚举值校验
{
type: 'select',
field: 'role',
title: '角色',
validate: [
{ required: true, message: '请选择角色' },
{ enum: ['admin', 'user', 'guest'], message: '角色必须是admin, user, 或guest' }
],
options: [
{ label: '管理员', value: 'admin' },
{ label: '用户', value: 'user' },
{ label: '游客', value: 'guest' }
]
}
利用本文中的示例和 async-validator 的文档,您可以快速实现各种校验需求,为用户提供更好的表单交互体验。