文档中心
Document Center

# 表单

具有数据收集、校验和提交功能的表单，包含输入框、选择框、复选框、单选框等元素。

# 概念说明

# 属性

组件通用属性请参见组件通用说明。

# 表单

  • 表单布局：更改表单的布局方式。

    • 行内展示，标签与表单项在一行展示。

    • 块级展示，宽度会充满父元素。

    • 栅格展示，可设置列数。

  • 列数：整个表单的划分列数，此项需要设置表单布局为“栅格展示”。

  • 列间隔：设置表单项间隔大小。支持无、小、正常、大四个级别，此项需要设置表单布局为“行内展示”。

  • 行间隔：设置表单行间隔大小。支持无、小、正常、大四个级别。

  • 标签布局：设置标签布局方式。

    • 行内展示。

    • 块级展示，标签与表单项分行展示。

  • 标签宽度：设置标签宽度。支持迷你、小、正常、大四个级别。

  • 标签省略显示：文字过长是否省略显示，默认文字超出时会换行。

  • 是否可折叠：分组是否可以折叠。

  • 手风琴模式：是否每次只会展开一个分组。

  • 展开触发方式：展开/折叠的触发方式。

    • 整行点击均可触发。
    • 仅点击小箭头时触发。

# 表单项

  • 占据数：列跨越的格数。

  • 标签布局：设置标签布局方式。

    • 行内展示。

    • 块级展示，标签与表单项分行展示。

  • 标签大小：单独设置表单项的标签宽度大小。支持迷你、小、正常、大四个级别。

  • 标签省略显示：文字过长是否省略显示，默认文字超出时会换行。

  • 字段大小：单独设置表单项的内容大小。

  • 必填标记：是否必填。仅显示样式，如果要验证必填项，需要在rules中添加必填规则。

  • 提示消息：默认提示消息。

  • 描述内容：添加描述内容。

  • 标签纵轴对齐：标签与表单元素的纵轴对齐方式，默认为顶对齐。

  • 验证规则：验证规则。简写格式为字符串类型，完整格式或混合格式为数组类型，详见验证规则。

  • 忽略验证：设置是否忽略验证。

# 表单分组

  • 标题：显示的标题。

  • 列数：整个表单的划分列数。

  • 标签布局：设置标签布局方式。

    • 行内展示

    • 块级展示，标签与表单项分行展示。

  • 标签省略显示：文字过长是否省略显示。默认文字超出时会换行。

  • 是否可折叠：分组是否可以折叠。

  • 展开折叠状态：绑定展开/折叠状态的值。

  • 禁用：置灰显示，且禁止任何交互（焦点、点击、选择、输入等）。

# 事件

# 表单

事件名 触发条件
验证后 验证时触发

# 表单项

事件名 触发条件
验证后 验证时触发

# 表单分组

事件名 触发条件
展开折叠前 表单分组展开/折叠前
展开折叠后 表单分组展开/折叠后

# 内置逻辑

# 表单

内置逻辑名称 参数 功能描述
validate trigger：触发方式，可选值：submit、blur和input之一，或者它们的任意组合。
muted：是否验证后无提示		 验证整个表单的数据有效性

# 样式

样式说明请参见组件通用说明。

# 主题样式

  • label
    • label-color：表单项 label字体颜色，如 #223325。默认#666。
    • label-padding-right：表单项 label文本右边距，如 1px。默认20px。
    • label-width：表单项 label宽度，如 1px。默认76px。

# 验证规则

  • 系统内置必填、字符、手机号、邮箱等常用验证规则，用户也可以通过正则表达式来自定义规则。

  • 在编辑实体时，若字段设置为必填、或有最大长度、最小长度，拖拽实体生成表单会自动添加验证规则。若不需要使用验证规则，可开启忽略验证。

# 验证规则一览表

分组 验证项 参数 参数类型 默认值 参数说明 验证规则说明
常用 required 必填，空值指''、undefined、null
filled 必填，在required基础上，字符串不能全为空格
mobile locale 字符串|字符串集合 zh-CN 所在地区，例如zh-CN,ja-JP等，可以是一个字符串或字符串集合，为空匹配所有地区 输入内容为合法手机号 locale:所在地区，例如zh-CN,ja-JP等，可以是一个字符串或字符串集合，为空匹配所有地区 strict:是否检验国家代号。如果为true，则必须以+和国家码开头
strict 布尔 FALSE 是否检验国家代号。如果为true，则必须以+和国家码开头
email 校验邮箱格式，必须为正确的邮箱
maxLength max 整数 最大长度 长度不得超过指定数字；字符串、集合长度均可比较
max max 数字|字符串|日期 可取到的最大值 不得大于指定的值；数字、字符串、日期均可比较
range min 数字|字符串|日期 可取到的最小值 必须在指定值范围内；数字、字符串、日期均可比较
max 数字|字符串|日期 可取到的最大值
string 必须为字符串类型
number 必须为数字类型
integer 必须为整数
pattern re 字符串 正则表达式 根据正则表达式判断
unique arr List集合 验证List集合中是否包含输入内容 验证输入框的内容是否包含在参数arr中，若包含则提示：***已存在，专用于判重
空值判断 required 必填，空值指''、undefined、null
filled 必填，在required基础上，字符串不能全为空格
notEmpty 集合不能为空，支持字符串比较
empty 必须为空，支持字符串比较
范围判断 minLength min 整数 最小长度 不得少于指定字符数；字符串、集合长度均可比较
maxLength max 整数 最大长度 不得超过指定字符数；字符串、集合长度均可比较
rangeLength min 整数 最小长度 字符数必须在指定范围内；字符串、集合长度均可比较
max 整数 最大长度
min min 数字|字符串|日期 可取到的最小值 不得小于指定的值；数字、字符串、日期均可比较
max max 数字|字符串|日期 可取到的最大值 不得大于指定的值；数字、字符串、日期均可比较
range min 数字|字符串|日期 可取到的最小值 必须在指定值范围内；数字、字符串、日期均可比较
max 数字|字符串|日期 可取到的最大值
相等或包含判断 is arg 任意类型 必须与arg相同，使用===比较
isNot arg 任意类型 必须与arg不同
equals arg 任意类型 必须与arg相等
notEquals arg 任意类型 必须与arg不相等
confirmed arg 任意类型 验证逻辑同equals，错误信息专用于密码的二次确认
includes args List集合 验证必须包含args中取值 验证值为List集合，输入和失焦时验证，必须包含List集合中的项
excludes args List集合 验证不能包含args中取值 验证值为List集合，输入和失焦时验证，不包含参数中的项
included args List集合 验证必须包含args中取值 验证值为单项取值，输入和失焦时验证，必须为参数中的某一个值
excluded args List集合 验证不能包含args中取值 验证值为单项取值，输入和失焦时验证，不能为参数中的任意一个值
unique arr List集合 验证List集合中是否包含输入内容 验证输入框的内容是否包含在参数arr中，若包含则提示：***已存在，专用于判重
noDuplicates 验证项集合内不能重复
类型判断 string 必须为字符串类型
number 必须为数字类型
numeric noSymbols 布尔 如果为True，不能包含+，-，.等符号 必须为数字，noSymbols为True，不能包含+，-，.等符号
integer 必须为整数
decimal force 布尔 如果为true只允许小数 整数或小数；force为true只允许小数；digits设置小数位数范围，格式为1,3。默认为1,
digits 字符串 设置小数位数范围，格式如：1,3。默认为1,
boolean 必须为布尔类型
function 必须为函数
array 必须为数组
object 必须为对象
plainObject 必须为简单对象
字母数字-_判断 alpha 只能为字母
alphaNum 只能为字母或数字
alphaDash 必须由字母或下划线组成
alphaNumDash 必须由字母、数字或下划线组成
alphaSpaces 必须由字母或空格组成
lowerCase 不能出现大写字母
upperCase 不能出现小写字母
without-- 不能连续出现中划线
without__ 不能连续出现下划线
特定场景判断 email 必须为正确的邮箱
ip 必须为正确的IP
port 必须为正确的端口
halfWidth 需要输入半角字符
fullWidth 必须输入全角字符
macAddress 必须输入正确的 MAC 地址
ascii 必须输入ascii字符
base64 必须输入base64编码
byteLength min 整数 最小字节长度 输入字符串的字节长度范围限制
max 整数 最大字节长度
dataURI 必须输入dataURI 编码
divisibleBy divisor 整数 输入数字能被divisor整除 输入数字能被divisor整除
hash algorithm 字符串 算法名称，如md5 输入编码符合algorithm哈希算法，算法名称，支持md4、md5、sha1、sha256、sha384、sha512、ripemd128、ripemd160、tiger128、tiger160、tiger192、crc32以及crc32b
md5 输入编码符合md5算法
hex 输入数字是十六进制
hexColor 输入字符串是十六进制颜色码
creditCard 输入是合法信用卡号
fqdn 输入合法的全限定域名
ipOrFQDN 输入内容必须是一个合法IP或全限定域名
ipRange version 整数 IP版本，接受4或6 输入内容必须是正确的IP段，如130.5.5.25/24
isbn version 整数 ISBN版本，接受10或13 输入内容是一个合法的国际标准书号（ISBN），version：ISBN版本，接受10或13
issn 输入内容是一个合法的国际标准连续出版物号（ISSN）
isin 输入内容是一个合法的国际证券识别码（ISIN）
iso8601 strict 布尔 是否检测闰年日期，如果为true，则2019-02-29属于非法日期 输入内容为合法的ISO8601日期；strict:是否检测闰年日期，若strict为true，则2019-02-29属于非法日期
iso31661Alpha2 输入内容是一个合法的ISO-31661 Alpha-2国家代码
iso31661Alpha3 输入内容是一个合法的ISO-31661 Alpha-3国家代码
json 输入字符串可以被解析为JSON格式
jwt 输入字符串是合法的JSON Web Token
latLong 输入字符串为合法的经纬度坐标
mobile locale 字符串|字符串集合 zh-CN 所在地区，例如zh-CN,ja-JP等，可以是一个字符串或字符串集合，为空匹配所有地区 输入内容为合法手机号 locale:所在地区，例如zh-CN,ja-JP等，可以是一个字符串或集合，为空匹配所有地区 strict:是否检验国家代号。如果为true，则必须以+和国家码开头
strict 布尔 FALSE 是否检验国家代号。如果为true，则必须以+和国家码开头
mongoid 输入字符串为合法的MongoDB对象的ID
postalCode locale 字符串|字符串集合 CN 所在地区，例如CH，JP等 输入字符串为合法的邮政编码 locale:所在地区，例如CH，JP等
url 输入字符串为合法的URL格式，如http://aa.bb
uuid version 整数 采用的UUID版本，接受3，4，5，不填默认匹配所有版本 输入字符串为合法的UUID version：采用的UUID版本，接受3，4，5，不填默认匹配所有版本
chinese 输入字符串为合法的中文内容
正则判断 pattern re 字符串 正则表达式 根据正则表达式判断
^az 以小写字母开头
^az09 以小写字母或数字开头
^az09_ 以小写字母、数字或下划线开头
^azAZ 以字母开头
^azAZ09 以字母或数字开头
^azAZ09_ 以字母数字或下划线开头
az09$ 以小写字母或数字结尾
azAZ09$ 以字母或数字结尾
^09$ 以数字组成
^az09$ 以小写字母或数字组成
^az09-$ 以小写字母、数字或中划线组成
^az09-.$ 以小写字母，数字，-或.组成
^azAZ09$ 以字母或数字组成
^azAZ09-$ 以字母，数字，-组成
^azAZ09_$ 以字母、数字、下划线组成
^azAZ09-_$ 以字母、数字、"-"或"_"组成
^az09-_$ 以字母、数字、-或下划线组成
上次更新: 2023年06月27日

← 单行输入 →