简介
表单组件是表单引擎的核心,下面将对常用表单组件进行详细的说明。
文档约定
- 字符
“●”
标识“是”。 - 字符
“○”
表示“否”。 - 字符
“△”
表示“看情况” - 表单开头的“序号”只在文档中做标识用,无其他含义。
组件信息
- 描述:对组件功能的介绍。
- 使用:对组件使用场景的示例。
- 属性:组件的详细属性介绍。
- 数据:组件提交&赋值的数据格式。
一、基础组件
1. 描述说明
标识:explain
描述
对内容、功能、输入等进行讲解描述说明,可实现描述内容的自定义。
可以指定文字样式、插入图片等,及使用富文本方式实现。
使用
- 对统计模块的计算规则进行描述说明。
- 对录入项目进行解释说明。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | content | 字符串 | ● | ○ | 具体的说明内容,支持富文本 | 说明文字 |
数据
纯展示性组件,无提交数据功能。
2. 单行输入框
标识:input
描述
最长用的表单之一,负责单行内容的输入采集。
使用
- 用于对用户姓名/昵称的采集。
- 用于对文章标题的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 单行输入框 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请输入 |
3 | length | 数字 | ● | ● | 最大长度 | 100 |
4 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
5 | check | 字符串 | ○ | ● | 内置校验的格式指定 | \ |
6 | regular | 字符串 | ○ | △ | 自定义的正则表达式 | \ |
7 | structure | 字符串 | ○ | ○ | 录入格式构成描述说明 | \ |
8 | default | 字符串 | ○ | ○ | 自定义默认值 | \ |
9 | cookie | 数字 | ○ | ○ | 是否记录和读取cookie值 | 否 |
特别说明:
regular
自定义的正则表达式。当校验格式选择为自定义时,保存输入的正则表达式。使用示例:
- 要求用户名为不能有特殊字符串,长度为6到20位:
\w{6,20}
。
structure
录入格式描述说明。使用示例:
- 手机号码由1开头的11数字组成。
- 账号只能包含字母数字和下划线。
cookie
记录和读取cookie值。开启后下次进入录入界面时会默认填写上一次的值。使用示例:
- 需要记录每日执勤人员,基本都是相同的人,就可以打开此功能。
- 需要填报每日身体情况,基本都是“身体无异常”,就可以打开此功能。
数据
该组件提交&赋值的数据格式为:
{
"value": "用户录入的值"
}
3. 多行输入框
标识:textarea
描述
最长用的表单之一,负责多行行内容的输入采集。
使用
- 用于对用备注说明内容的采集。
- 用于对事件描述内容的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 多行输入框 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请输入 |
3 | length | 数字 | ● | ● | 最大长度 | 500 |
4 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
5 | check | 字符串 | ○ | ● | 内置校验的格式指定 | \ |
6 | regular | 字符串 | ○ | △ | 自定义的正则表达式 | \ |
7 | structure | 字符串 | ○ | ○ | 录入格式构成描述说明 | \ |
8 | default | 字符串 | ○ | ○ | 自定义默认值 | \ |
9 | iscookie | 数字 | ○ | ○ | 是否记录和读取cookie值 | 否 |
- 基础属性和单行录入框相同,详细描述见前者。
数据
提交&赋值的数据格式为:
{
"value": "用户录入的值"
}
5. 数字输入框
标识:number
描述
支持输入或按-+键步进。
使用
- 用于对商品数量的采集。
- 用于对人数的的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 数字输入框 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | \ |
3 | step | 数字 | ● | ○ | 步进值 | 1 |
4 | type | 字符串 | ● | ● | 类型整数、小数… | 整数 |
5 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
6 | check | 字符串 | ○ | ● | 内置校验的格式指定 | \ |
7 | regular | 字符串 | ○ | △ | 自定义的正则表达式 | \ |
8 | structure | 字符串 | ○ | ○ | 录入格式构成描述说明 | \ |
9 | default | 字符串 | ○ | ○ | 自定义默认值 | 0 |
10 | iscookie | 数字 | ○ | ○ | 是否记录和读取cookie值 | 否 |
- 基础属性和单行录入框相同,详细描述见前者。
数据
提交&赋值的数据格式为:
{
"value": 123
}
6. 时间日期框
标识:datetime
描述
选择日期时间。
使用
- 用于对任务设定完成时间的采集。
- 用于对出生日期的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 日期框 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请选择 |
3 | type | 字符串 | ● | ● | 时间日期类型 | 日期 |
4 | begin | 字符串 | ○ | ● | 起始限制 | \ |
5 | end | 字符串 | ○ | ● | 截止限制 | \ |
6 | format | 字符串 | ● | ● | 格式(显示用) | \ |
7 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
8 | default | 字符串 | ○ | ○ | 自定义默认值 | \ |
9 | iscookie | 数字 | ○ | ○ | 是否记录和读取cookie值 | 否 |
- 时间日期类型:
- 日期+时间
yyyy-MM-dd hh:mm
- 日期
yyyy-MM-dd
- 时间
hh:mm
数据
提交&赋值的数据格式为:
{
"value": "用户录入的值"
}
7、单选框+字典项
标识:radioitem
描述
通过字典组选择。
使用
- 用于对人员类型的采集。
- 用于对事件等级的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 单选框 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请选择 |
3 | sort | 字符串 | ● | ● | 字典组项 | \ |
4 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
5 | default | 字符串 | ○ | ○ | 自定义默认值 | \ |
6 | iscookie | 数字 | ○ | ○ | 是否记录和读取cookie值 | 否 |
数据
提交&赋值的数据格式为:
{
"code":"数据ID",
"value": "数据标题"
}
8、多选框+字典项
标识:ckeckboxitem
描述
通过字典组选择。
使用
- 用于对
装备设施
的采集。 - 用于对
删除项目
的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 多选框 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请选择 |
3 | sort | 字符串 | ● | ● | 字典组项 | \ |
4 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
5 | default | 字符串 | ○ | ○ | 自定义默认值 | \ |
6 | iscookie | 数字 | ○ | ○ | 是否记录和读取cookie值 | 否 |
数据
提交&赋值的数据格式为:
{
"value": [{"code":"数据编码","value":"数据标题"}]
}
9、评分
标识:rate
描述
可设置星星点亮数量。
使用
- 用于对
客服服务满意度
的采集。 - 用于对
商品购买满意度
的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 单选框 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请选择 |
3 | full | 数字 | ● | ● | 满分(5/10/20) | 5 |
4 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
5 | default | 字符串 | ○ | ○ | 自定义默认值 | \ |
6 | iscookie | 数字 | ○ | ○ | 是否记录和读取cookie值 | 否 |
数据
提交&赋值的数据格式为:
{
"value": 5
}
10、滑动条
标识:slider
描述
一般用于小范围的数字选择。
使用
- 用于对
学生成绩
的采集。 - 用于对
参数强度
的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 单选框 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请选择 |
3 | min | 数字 | ● | ● | 最小值 | 0 |
4 | max | 数字 | ● | ● | 最大值 | 100 |
5 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
6 | default | 字符串 | ○ | ○ | 自定义默认值 | \ |
7 | iscookie | 数字 | ○ | ○ | 是否记录和读取cookie值 | 否 |
数据
提交&赋值的数据格式为:
{
"value": 60
}
10、开关
标识:switch
描述
实现状态切换功能。
使用
- 用于对
隐私开放状态
的采集。 - 用于对
商品状态
的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 单选框 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请选择 |
3 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
4 | default | 字符串 | ○ | ○ | 自定义默认值 | \ |
5 | iscookie | 数字 | ○ | ○ | 是否记录和读取cookie值 | 否 |
数据
提交&赋值的数据格式为:
{
"value": 1
}
11、密码框
标识:password
描述
实现密码采集时显示安全等级。
使用
- 用于对
账户密码
的采集。 - 用于对
隐私信息
的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 单选框 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请选择 |
3 | length | 数字 | ● | ● | 最大长度 | 50 |
4 | safety | 字符串 | ● | ● | 安全性验证 | 中 |
5 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
数据
提交&赋值的数据格式为:
{
"value": "用户录入的值"
}
二、进阶组件
1. 单选框+列表项
标识:radiolist
描述
通过跳转列表项进行选择。
使用
- 用于对
人员
的采集。 - 用于对
班级
的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 单选框 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请选择 |
3 | list | 字符串 | ● | ● | 列表项 | \ |
4 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
5 | default | 字符串 | ○ | ○ | 自定义默认值 | \ |
6 | iscookie | 数字 | ○ | ○ | 是否记录和读取cookie值 | 否 |
数据
提交&赋值的数据格式为:
{
"code":"数据ID",
"value": "数据标题"
}
2. 多选框+列表项
标识:ckeckboxlist
描述
通过跳转列表项进行选择。
使用
- 用于对
分发用户
的采集。 - 用于对
数据多选
的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 多选框 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请选择 |
3 | list | 字符串 | ● | ● | 列表组项 | \ |
4 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
5 | default | 字符串 | ○ | ○ | 自定义默认值 | \ |
6 | iscookie | 数字 | ○ | ○ | 是否记录和读取cookie值 | 否 |
数据
提交&赋值的数据格式为:
{
"value": [{"code":"数据编码","value":"数据标题"}]
}
3. 时间范围
标识:textarea
描述
选择日期时间区间。
使用
- 用于对
活动时间
的采集。 - 用于对
有效时间
的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 时间范围 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请选择 |
3 | type | 字符串 | ● | ● | 时间日期类型 | 日期 |
4 | begin | 字符串 | ○ | ● | 起始限制 | \ |
5 | end | 字符串 | ○ | ● | 截止限制 | \ |
6 | format | 字符串 | ● | ● | 格式(显示用) | \ |
7 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
8 | default | 字符串 | ○ | ○ | 自定义默认值 | \ |
9 | iscookie | 数字 | ○ | ○ | 是否记录和读取cookie值 | 否 |
数据
提交&赋值的数据格式为:
{
"begin": "用户录入的起始值",
"end": "用户录入的截止值"
}
4. 树状选择
标识:tree
描述
选取系统单位树结构。
使用
- 用于对
单位部门
的采集。 - 用于对
行政区划
的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 输入框 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请输入 |
3 | api | 字符串 | ● | ○ | 数据接口 | \ |
4 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
8 | default | 字符串 | ○ | ○ | 自定义默认值 | \ |
9 | iscookie | 数字 | ○ | ○ | 是否记录和读取cookie值 | 否 |
数据
提交&赋值的数据格式为:
{
"code":"数据ID",
"value": "数据标题"
}
5. 附件选择
标识:file
描述
用来选择照片、视频等。
使用
- 用于对
照片
的采集。 - 用于对
视频
的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 附件 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请添加 |
3 | length | 数字 | ● | ● | 最大长度 | 0(不验证) |
4 | type | 字符串 | ● | ● | 文件类型 | \ |
5 | sample | 字符串 | ○ | ○ | 示例图片 | \ |
6 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
- 基础属性和单行录入框相同,详细描述见前者。
数据
提交&赋值的数据格式为:
{
"value": [{"code":"数据编码","value":"数据标题"}]
}
6. 地理位置
标识:location
描述
用来选择地图定位。
使用
- 用于对
事故地点
的采集。 - 用于对
人员位置
的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 附件 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请添加 |
3 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
数据
提交&赋值的数据格式为:
{
"type":"编码类型",
"longitude":"经度",
"latitude":"纬度",
"address":"地址"
}
计算公式
三、扩展组件
1. 金额输框
标识:money
描述
用户输入数字,底部使用大写中文显示金额,单位“元”。
精确到小数点后两位,自带格式校验功能。
使用
- 用于对
消费金额
的采集。 - 用于对
商品价格
的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 金额输框 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请输入 |
3 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
4 | default | 字符串 | ○ | ○ | 自定义默认值 | \ |
5 | iscookie | 数字 | ○ | ○ | 是否记录和读取cookie值 | 否 |
数据
提交&赋值的数据格式为:
{
"value": 888.00
}
2. 手机号码输框
标识:phone
描述
包括国家代码+手机号,自带格式校验功能。
使用
- 用于对
用户手机号码
的采集。 - 用于对
收货人手机号码
的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 手机号 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请录入 |
3 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
4 | default | 字符串 | ○ | ○ | 自定义默认值 | \ |
5 | countrydefault | 字符串 | ● | ○ | 默认国家代码 | +86 |
6 | iscookie | 数字 | ○ | ○ | 是否记录和读取cookie值 | 否 |
数据
提交&赋值的数据格式为:
{
"country":"国家代码",
"value":"手机号码"
}
3. 车牌输框
标识:carnumber
描述
包括省份简称+车牌号码,自带格式校验功能。
使用
- 用于对
车辆号牌
的采集。
属性
序号 | 名称 | 类型 | 必填 | 验证 | 描述 | 默认值 |
---|---|---|---|---|---|---|
1 | title | 字符串 | ● | ○ | 标题 | 附件 |
2 | hint | 字符串 | ○ | ○ | 提示文字 | 请添加 |
3 | ismust | 数字 | ● | ● | 是否必填验证 | 否 |
4 | default | 字符串 | ○ | ○ | 自定义默认值 | \ |
5 | provincedefault | 字符串 | ● | ○ | 默认省份代码 | \ |
6 | iscookie | 数字 | ○ | ○ | 是否记录和读取cookie值 | 否 |
7 | linkage | 字符串 | ○ | ○ | 号牌类型联动 | \ |
数据
提交&赋值的数据格式为:
{
"type":"号牌种类",
"value":"号牌号码"
}
四、内置功能
1. 内置系统参数
- 当前日期时间
- 当前用户信息
- 当前位置信息
2. 内置校验格式
内置正则常见正则校验格式,方便使用及统一管理维护。
序号 | 编码 | 描述 | 达式规则 | 描述说明 |
---|---|---|---|---|
1 | pass | 不验证 | ||
2 | custom | 自定义 | ||
3 | number | 仅数字 | ||
4 | letter | 仅字母 | ||
5 | chinese | 仅中文 | ||
6 | mobile | 手机号 | ||
7 | identity | 身份证 | ||
8 | … | … |
五、相关字典
1. 是否判断
序号 | 编码 | 值 | 描述 | 备注 |
---|---|---|---|---|
1 | 1 | 1 | 是 | |
2 | 0 | 0 | 否 |
2. 时间日期
序号 | 编码 | 值 | 描述 | 备注 |
---|---|---|---|---|
1 | date | 日期 | ||
2 | time | 时间 | ||
2 | datetime | 日期时间 |
数字类型
序号 | 编码 | 值 | 描述 | 备注 |
---|
密码等级
序号 | 编码 | 值 | 描述 | 备注 |
---|---|---|---|---|
1 | high | 高 | ||
2 | middle | 中 | ||
3 | low | 低 |
密码的构成:数字、字母、特殊符号。
密码等级定义如下:
- 高:包含其中三项。
- 中:包含其中两项。
- 低:包含其中一项。