表单及校验
1. 功能描述
创建input, select, button等类型的表单元素，同时提供表单提交、表单重置、表单赋值、获取表单数据等功能。
2. 使用方法
2.1 创建实例
首先定义form标签，并设置id。然后调用如下方法：
const form = McrbHttpClient.form(form_id)
form.render(options)
form_id为form元素的id, options为表单配置，表单配置详见表单配置
2.2 实例方法
获取某一字段的值：form.getValue(name)
获取所有表单项的值：form.allValues()
对某一字段进行赋值：form.setValue(name, value)
批量赋值：form.setValues(obj), obj = { name1: value1, name2: value2...}
3. 表单配置options
表单配置options为一个数组，数组中每个元素为一个表单元素的配置对象(option)。
option对象格式如下：
{
type: 'input', // 表单元素类型
label: '姓名', // 元素label
name: 'name', // 元素的name属性
required: true, // 是否为必填项
placeholder: '请输入姓名', // 其placeholder属性对应值
...
}
目前支持表单元素的类型如下：
1.input
配置参数如下：
| type(String) | input |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| required (Boolean) | 是否为必填项 |
| verify (Array[String]) | 字符串数组，表单验证参数。目前可以取值：phone, email, url, number, date, identity |
| placeholder (String) | 其placeholder属性对应值 |
| unit (String) | 单位。如m,kg等 |
| custom (String | Dom) | 自定义区块，添加在input后，class名称“mcb-input-custom” |
2.textarea
| type(String) | textarea |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| required (Boolean) | 是否为必填项 |
| placeholder (String) | 其placeholder属性对应值 |
3.select（废弃）
| type(String) | select |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| required (Boolean) | 是否为必填项 |
| opts (Object) | 例：opts: {'请选择颜色': '','红色': 1,'绿色': 2}Key为选项显示的值，value为表单提交时的值，空串代表默认项。 |
4.selectInput
| type(String) | selectInput |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| required (Boolean) | 是否为必填项 |
| opts (Array[Object]) | 例：opts: [{value: '', text: '请选择', selected: true}, {value: 1, text: '红色'}, {value: 2, text: '绿色'}, {value: 3, text: '黄色'}] |
5.radio
| type(String) | radio |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| required (Boolean) | 是否为必填项 |
| radioList（Object[]） | 每个单元按钮选项的配置 |
raidoList中每个Objcet字段及代表的含义如下：
| id(String) | Radio按钮的及其label（for属性）对应的id |
| value(String/Number) | 该radio对应的值（提交表单时提交的值） |
| label (String) | 该radio对应的label，自定义。 |
| checked（Boolean） | 是否被默认选中 |
| showIcon（Boolean） | 是否为图标+文字形式的radio |
| iconPath（String） | 图标的路径 |
6.checkbox
| type(String) | checkbox |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| required (Boolean) | 是否为必填项 |
| checkboxList Object[]） | 每个单元按钮选项的配置 |
checkboxList中每个Objcet字段及代表的含义如下：
| id(String) | Checkbox按钮的及其label（for属性）对应的id |
| value(String/Number) | 该Checkbox对应的值（提交表单时提交的值） |
| text (String) | 该Checkbox对应的label，自定义。 |
| checked（Boolean） | 是否被默认选中 |
| showIcon（Boolean） | 是否为图标+文字形式的checkbox |
| iconPath（String） | 图标的路径 |
7.upload
| type(String) | upload |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| required (Boolean) | 是否为必填项 |
| maxSize（Number） | 上传文件的最大大小，单位Mb |
| btnText（String） | 上传按钮显示的文字 |
| progressBar（Boolean） | 是否显示上传进度条 |
| isImg(Boolean) | 是否只上传图片，且有缩略图 |
| isMulti(Boolean) | 是否支持多文件/图片上传 |
| fileType（String或Array[String]） | isImg为真时无效。input的accept属性值。例：image/*, audio/*, video/*, .pdf, .doc, .xls, .mp4, .png等。默认值：所有类型文件。 |
| callback | 上传之后的回调函数 |
8.button
| type(String) | button |
| name (Array[String]) | 按钮组显示的名字。 |
| event (Array[String]) | 字符串数组，可取值：submit, reset, cancel。表示按钮对应的事件 |
| callback (Array[Function]) | 函数数组，表示按钮事件对应的回调函数。 |
| beforeSumbit (Function) | 表单提交前的回调函数，用于处理特殊校验等。返回一个布尔类型的值，返回true时，表单正常进入提交流程，返回false时，提交终止。 |
9.edittext
| type(String) | edittext |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| required (Boolean) | 是否为必填项 |
| setdata(Object) | 编辑器参数项设置： Id编辑器绑定元素的id; width编辑器宽; height编辑器高; filePostName上传图片接口中file参数名; uploadJson上传图片接口地址; |
10.video
| type(String) | video |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| maxSize (Number) | 视频文件最大多少MB |
| required (Boolean) | 是否为必填项 |
11.switch (开关)
| type (String) | switch |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| active (Boolean) | 开关是否打开 |
| required (Boolean) | 是否为必填项 |
12.map（拾点器）
注意事项：使用map组件时，需要设置高德地图的key、securityJsCode及version(默认值为1.4.15, 可选2.0)
| type (String) | map |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| width(String) | 地图宽度(可选，默认值为100%) |
| height(String) | 地图高度(可选，默认值为400px) |
| layers(Array) | 地图图层（非必填），satellite卫星图，roadNet路网图 |
| required (Boolean) | 是否为必填项 |
13.multiple（下拉多选）
| type(String) | multiple |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| required (Boolean) | 是否为必填项 |
| readOnly (Boolean) | 是否为只读 |
| opts (opt[]) | 下拉多选选项列表 |
opts中每个opt字段及代表的含义如下：
| text(String) | 选项显示的文字 |
| value | 选项对应的值 |
14.datePicker（日期时间选择器）
| type(String) | datePicker |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| required (Boolean) | 是否为必填项 |
| readOnly (Boolean) | 是否为只读 |
15.dragUpload（拖拽上传）
| type(String) | dragUpload |
| label(String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| required (Boolean) | 是否为必填项 |
| multiple (Boolean) | 是否可以上传多个文件 |
| maxSize (Number) | 上传文件最多大小，单位kb |
| text (String) | 拖拽上传框内的自定义文字 |
| tips (String) | 拖拽上传框底部的提示语 |
| icon (String) | 拖拽上传框内上传图标 |
16. inputNumber（数字输入框）
| type(String) | inputNumber |
| label(String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| required (Boolean) | 是否为必填项 |
| min (Number) | 数字输入框最小值 |
| max (Number) | 数字输入框最小值 |
| tips (String) | 悬停在数字输入框上时的提示语 |
17. bigupload（大文件上传）
| type(String) | bigupload |
| label(String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| required (Boolean) | 是否为必填项 |
| readOnly（Boolean） | 是否为只读 |
| fileType（String或Array[String]） | input的accept属性值。例：image/*, audio/*, video/*, .pdf, .doc, .xls, .mp4, .png等。默认值：所有类型文件。 |
| url（String） | 上传api的url |
| success(Function) | 上传成功后的回调，参数upload_plugin(Object)，包含属性data: 文件地址，formitem为该表单项对应的dom元素 |
| error(Function) | 上传失败后的回调，参数为错误信息 |
18. multiSelect（多级选择器）
| type(String) | multiSelect |
| label(String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| required (Boolean) | 是否为必填项 |
| lastVal (Boolean) | 是否用所选择的最低级选择器的值最为最终的整体值，默认值为false。当三级选择器的值分别为1,2,3，lastVal值为true时，最终的值为3；当lastVal值为false时，最终的值为1,2,3。 |
| group[Array]） | 多级选择器的配置项(item)组合。 |
配置项item中包含属性如下
| level (Number) | 选择器的等级 |
| opts (Array) | 选项数组，每个选项包含text(选项显示的文字，String类型)，value(选项的值，String类型)。 |
| onChange (Function) | 当前等级选择器值发生改变时（点击选项dom触发），触发的回调。参数为选择器选择选项的值，返回值为下一个等级的选项数组opts |
实例：
效果展示：
本文档来自—microbee-http 丨 软件开发框架平台
返回顶部
热线电话
微信
扫一扫