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

在开源项目低代码表单FormCreate 中，可以通过 validate 设置项为表单组件设置验证规则。无论是内置的表单组件还是自定义的表单组件，都支持表单校验。本文将具体介绍验证规则的利用方法，并提供一些示例来资助您更好地明白和应用这些功能。
源码地点: Github | Gitee

根本验证规则

validate 设置项允许您为每个表单字段定义多种验证规则。每个规则都是一个对象，您可以通过设置差异的属性来控制验证行为。
参数说明类型默认值enum罗列类型string-len字段长度number-max最大长度number-message校验文案string-min最小长度number-pattern正则表达式校验RegExp-required是否必选booleanfalsetransform校验前转换字段值function(value) => transformedValue:any-type内建校验类型，可选项string‘string’validator自定义校验function(rule, value, callback)-whitespace必选时，空格是否会被视为错误booleanfalse   type 需要根据组件的 value 类型定义
  常见校验示例

1.必填字段校验

1. {
2.   type: 'input',
3.   field: 'username',
4.   title: '用户名',
5.   validate: [
6.     { required: true, message: '用户名是必填项' }
7.   ]
8. }

复制代码

2.最小长度校验

1. {
2.     type: 'input',
3.         field: 'password',
4.         title: '密码',
5.         validate: [
6.         { required: true, min: 6, message: '密码长度不能少于6个字符' }
7.     ]
8. }

复制代码

3. 正则表达式校验

1. {
2.     type: 'input',
3.         field: 'phone',
4.         title: '电话号码',
5.         validate: [
6.         { required: true, message: '请输入电话号码' },
7.         { pattern: '^1[3-9]\d{9}$', message: '请输入有效的手机号' }
8.     ]
9. }

复制代码

4. 自定义校验

1. {
2.     type: 'input',
3.         field: 'age',
4.         title: '年龄',
5.         validate: [
6.         {
7.             validator: (rule, value, callback) => {
8.                 if (value < 18) {
9.                     callback(new Error('年龄必须大于或等于18岁'));
10.                 } else {
11.                     callback();
12.                 }
13.             },
14.             message: '请输入合法的年龄'
15.         }
16.     ]
17. }

复制代码

5. 罗列值校验

1. {
2.     type: 'select',
3.         field: 'role',
4.         title: '角色',
5.         validate: [
6.         { required: true, message: '请选择角色' },
7.         { enum: ['admin', 'user', 'guest'], message: '角色必须是admin, user, 或guest' }
8.     ],
9.         options: [
10.         { label: '管理员', value: 'admin' },
11.         { label: '用户', value: 'user' },
12.         { label: '游客', value: 'guest' }
13.     ]
14. }

复制代码

利用本文中的示例和 async-validator 的文档，您可以快速实现各种校验需求，为用户提供更好的表单交互体验。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。