开源项目低代码表单FormCreate中ElementPlus表单使用校验规则示例

在开源项目低代码表单FormCreate 中，可以通过 validate 配置项为表单组件设置验证规则。无论是内置的表单组件还是自定义的表单组件，都支持表单校验。本文将详细介绍验证规则的使用方法，并提供一些示例来帮助您更好地理解和应用这些功能。

源码地址: Github | Gitee

基本验证规则

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' }]
}