开源项目低代码表单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.必填字段校验

js 复制代码
{
  type: 'input',
  field: 'username',
  title: '用户名',
  validate: [
    { required: true, message: '用户名是必填项' }
  ]
}

2.最小长度校验

js 复制代码
{
    type: 'input',
        field: 'password',
        title: '密码',
        validate: [
        { required: true, min: 6, message: '密码长度不能少于6个字符' }
    ]
}

3. 正则表达式校验

js 复制代码
{
    type: 'input',
        field: 'phone',
        title: '电话号码',
        validate: [
        { required: true, message: '请输入电话号码' },
        { pattern: '^1[3-9]\d{9}$', message: '请输入有效的手机号' }
    ]
}

4. 自定义校验

js 复制代码
{
    type: 'input',
        field: 'age',
        title: '年龄',
        validate: [
        {
            validator: (rule, value, callback) => {
                if (value < 18) {
                    callback(new Error('年龄必须大于或等于18岁'));
                } else {
                    callback();
                }
            },
            message: '请输入合法的年龄'
        }
    ]
}

5. 枚举值校验

js 复制代码
{
    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 的文档,您可以快速实现各种校验需求,为用户提供更好的表单交互体验。

相关推荐
ajassi20004 小时前
开源 C++ QT QML 开发(七)自定义控件--仪表盘
c++·qt·开源
说私域8 小时前
新零售升维体验商业模式创新研究:基于开源AI大模型、AI智能名片与S2B2C商城小程序的融合实践
人工智能·开源·零售
明月(Alioo)8 小时前
用AI帮忙,开发刷题小程序:从零开始,构建微信小程序答题系统
微信小程序·开源·aigc
IvanCodes1 天前
RTX 4090 加速国产 AIGC 视频生成:腾讯混元与阿里千问开源模型
人工智能·开源·aigc·音视频
说私域1 天前
定制开发开源AI智能名片S2B2C商城小程序的会员制运营研究——以“老铁用户”培养为核心目标
人工智能·小程序·开源
俺会hello我的1 天前
舒尔特方格开源
前端·javascript·开源
ajassi20001 天前
开源 C++ QT QML 开发(五)复杂控件--Gridview
c++·qt·开源
说私域1 天前
公域流量转化困境下开源AI智能名片与链动2+1模式的S2B2C商城小程序应用研究
人工智能·小程序·开源
canonical-entropy1 天前
NopGraphQL 的设计创新:从 API 协议到通用信息操作引擎
低代码·graphql·可逆计算·nop平台
ajassi20001 天前
开源 C++ QT QML 开发(四)复杂控件--Listview
c++·qt·开源