表单引擎之表单组件详细说明

简介

表单组件是表单引擎的核心，下面将对常用表单组件进行详细的说明。

文档约定

• 字符“●”标识“是”。
• 字符“○”表示“否”。
• 字符“△”表示“看情况”
• 表单开头的“序号”只在文档中做标识用，无其他含义。

组件信息

• 描述：对组件功能的介绍。
• 使用：对组件使用场景的示例。
• 属性：组件的详细属性介绍。
• 数据：组件提交&赋值的数据格式。

一、基础组件

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 自定义的正则表达式。当校验格式选择为自定义时，保存输入的正则表达式。使用示例：

1. 要求用户名为不能有特殊字符串，长度为6到20位：\w{6,20}。

• structure 录入格式描述说明。使用示例：

1. 手机号码由1开头的11数字组成。
2. 账号只能包含字母数字和下划线。

• cookie 记录和读取cookie值。开启后下次进入录入界面时会默认填写上一次的值。使用示例：

1. 需要记录每日执勤人员，基本都是相同的人，就可以打开此功能。
2. 需要填报每日身体情况，基本都是“身体无异常”，就可以打开此功能。

数据
该组件提交&赋值的数据格式为：

{
  "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值	否

• 时间日期类型：

1. 日期+时间 yyyy-MM-dd hh:mm
2. 日期 yyyy-MM-dd
3. 时间 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	低

密码的构成：数字、字母、特殊符号。
密码等级定义如下：

• 高：包含其中三项。
• 中：包含其中两项。
• 低：包含其中一项。