admin 管理员组

文章数量: 1086019


2024年5月11日发(作者：评价高的软件开发培训)

element t form 验证多级table

表单校验prop规律

Element T Form 验证多级 Table 表单校验 Prop 规

律

Element T Form 是 中一款非常流行的表单组

件，它提供了简单易用的 API 和丰富的验证功能。多数场

景下，我们都是在普通的表单上使用它，例如登录、注

册、信息修改等。但实际开发中，多级 Table 表单也是我

们常常需要处理的一个场景，那在这个场景下如何使用

Element T Form 来进行表单校验呢？在这篇文章中，我们

将探讨多级 Table 表单中的 Element T Form 校验 Prop

规律。

前置知识

在开始讲解 Prop 规律之前，我们需要先对以下概念

进行了解：

- v-model： 组件中的双向数据绑定语法糖；

- Prop 规则：多级表单的配置项，用来定义当前字段的表

单属性和验证规则等信息； - validate 方法：Element T

Form 内置的表单验证方法。

Element T Form 的验证规则

首先，我们要了解 Element T Form 支持的验证规则

类型，包括如下五类：

- required：必填项，不允许为空或值为 null； -

type：字段类型校验，包括 string、number、boolean、

method、regexp、integer、float、array、object、

enum、date、url、hex、email； - min、max：数值校

验，支持 string、number、array 数据类型； - len：数

据长度校验，支持 string、array 数据类型； -

pattern：符合正则表达式校验的字符串。

校验 Prop 规则

在 Element T Form 中，Prop 规则由表单配置项组

成，如下所示：

{ name: 'userName', // 表单项名称，必填项

label: '用户名', // 表单项标签 type: 'text', // 表

单项类型 required: true, // 是否必填项 validate:

[ // 校验规则 {required: true, message: '请输入

用户名', trigger: 'blur'}, {min: 5, max: 20,

message: '长度在5到20个字符', trigger:

'blur'} ] }

在多级 Table 表单中，我们需要在配置项中增加一个

父标识，用以区分当前字段所处的层级，如下所示：


本文标签： 表单 校验 规则

版权声明：本文标题：element t form 验证多级table表单校验prop规律 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1715384890a687709.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。