表单项

用于数据录入

何时使用

• 在录入数据时配合表单和表单容器使用
• 在表格中进行条件搜索时

一、属性

1. 数据

数据项：

表单的数据项是用来绑定字段的，而表单项的数据绑定不同于一般的数据绑定。它不是必要项，只有设置了规则校验时才需要使用数据绑定。

备注：表单项数据录入组件的数据绑定字段必须与表单项数据绑定字段相同，才能使校验规则生效。

以文本输入框的必填校验为例：

当表单项和文本输入框绑定相同字段时，表单校验规则才会生效：

2. 功能

2.1 标签

标签用于设置显示内容，表示数据录入组件对应的字段。

2.2 标签提示

当标签提示中设置内容时，标签右侧会出现图标，鼠标悬停在图标上，会以气泡框的形式显示提示信息。常用于提供标签的附加信息，帮助用户理解输入项。

备注：如果没有任何内容，标签提示图标不会显示。

3. 校验

表单项一般用于设置校验规则。在实际应用中，为限制用户输入内容或进行必填校验，规则校验是必不可少的。例如：

• 电话号码格式校验
• 电子邮箱格式校验
• 限制价格不能为负数

备注：一个表单项可以设置多个校验规则。

点击“规则”标签后的输入框，选择“新建视图规则”，将弹出如下页面：

• 标题：设置规则标识
• 错误信息：设置通用错误提示，用于多个组件共用
• 应用组件：规则可应用于多个表单项。组件级的错误信息优先级高于全局错误信息。如都为空，则不会显示提示。

3.1 必填

选择“必填”后，表单项输入不能为空。若勾选“空格为错误”，则只输入空格也不通过校验。

3.2 长度

限制输入字符串的长度，常用于精确长度控制。

3.3 正则表达式

多用于字符串类型校验，常见场景如下：

电话号码（中国）

^((\+?86)|(\(\+86\)))?((((13[^4]{1})|(14[5-9]{1})|147|(15[^4]{1})|166|(17\d{1})|(18\d{1})|(19[12589]{1}))\d{8})|((134[^9]{1}|1410|1440)\d{7}))$

电子邮箱：

^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

4.外观

4.1 标签对齐

支持：无、左、右。

• 左：标签显示在左侧
• 右：标签显示在右侧

标签为右时：

标签为左或无时：

4.2 标签宽度

用于设置标签的宽度。

支持单位：span、像素、百分比

4.3 左侧间隔

用于设置标签与左侧的间隔，单位支持列数。

二、常见使用场景

1. 表单项校验

对书名和价格进行必填校验：

2. 配合表格数据筛选

根据图书名或作者筛选图书，使用表单项配置搜索条件：