- 首页
- 组件
- 表单 Form
表单常用使用方法
ui.dev.js 的 form 引擎接管
data-ajax="true" 表单：自动 AJAX 提交、loading 遮罩、失败字段标红聚焦，并把后端返回按状态码统一处理（formCallback）。本页速写两种最常用的方式：按钮式快速提交、状态码快速处理。
快速提交 · button[data-type="submit"]
| data-target | 行为 |
|---|---|
| 缺省 | AJAX 提交（ajaxSubmit.submit(action)），成功后走状态码处理 |
blank | 原生表单提交，新窗口打开（target="_blank"） |
new | 原生表单提交，新标签打开 |
self | 原生表单提交，当前页打开 |
<form class="form" data-ajax="true">
<div class="form-item">
<label class="label label-text pd-none">标题</label>
<input type="text" name="title" class="form-input">
</div>
<div class="form-line" style="display:flex;">
<button type="button" data-type="submit" data-action="/admin/save" class="btn btn-main">保存草稿</button>
<button type="button" data-type="submit" data-action="/admin/publish" data-target="new" class="btn btn-default mgreml-2">发布（新窗口）</button>
</div>
</form>
状态码快速处理 · formCallback
| status | 后端返回示例 | 前端自动操作 |
|---|---|---|
| 0 失败提示 | jsonReturn(0, '保存失败') | msg(message) 轻提示 |
| 1 成功提示 | jsonReturn(1, '保存成功') | msg(message) 轻提示 |
| 2 弹窗强提示 | jsonReturn(2, '请先登录') | alert(message) 弹窗 |
| 3 跨窗口通信 | jsonReturn(3, '', callback) | postMessage 发送到父窗口 |
| status | 后端返回示例 | 前端自动操作 |
|---|---|---|
| 4 刷新当前页 | jsonReturn(4, '已更新', 800) | 提示 800ms 后 location.reload() |
| 5 返回上页 | jsonReturn(5, '操作成功', 800) | 提示后 history.back() |
| 6 关闭弹窗 | jsonReturn(6, '已保存') | 父页提示 + pageCancel() 关闭弹窗 |
| 7 刷新父页 | jsonReturn(7, '保存成功', 1500) | 提示 1500ms 后 parent.location.reload()（iframe / 弹窗提交） |
| 8 替换地址 | jsonReturn(8, '', url) | location.replace(data) |
| status | 后端返回示例 | 前端自动操作 |
|---|---|---|
| 9 跳转 | jsonReturn(9, '跳转', url) | location.href = url（第三参进 url 字段，其余码进 data） |
$Q('#f').on('submitSuccess', function(res){
// 自定义成功处理，缺省走 formCallback
});
$Q('#f').on('submitError', function(err){
// err = {status, message}，缺省 msg(err.message)
});
提示： 字段校验失败由引擎自动加
error 红框并聚焦；name 前缀 * 必填、$ 金额、input[data-type="price"] 实时过滤等约定详见 form-data 详情页，更多回调见 JS 引擎 页。
基础信息一览
最常规的input
全部控件总表 · data-type 引擎（32 个）
ui.dev.js 的
syncForm 表单引擎共接管 32 个控件（选择 / 上传 / 输入增强 / 数据编辑 / 下拉 / 编辑器）。下表为全集：控件即书写方式，行为以引擎实测为准，关键属性直接在本表列出；已有详情页的给出链接，其余见下方 39 张索引。触发器为 data-type（特殊：latlng / editor / richtext 用的是 type）。
选择控件 · 7 个
| 控件 | 引擎行为 | 关键属性 | 详情页 |
|---|---|---|---|
input[data-type="checkbox"] | 多选勾标：.form-label 包裹，placeholder 作标题，勾选父级 hover | placeholder / data-value（预选，逗号分隔满 value）/ data-class | form-checkbox |
input[data-type="radio"] | 单选：同 name 互斥，.form-label 包裹 + hover | placeholder / name / data-value（预选） | form-radio |
input[data-type="switch"] | 双态开关 card-switch，值 1 / 0 | data-on / data-off（缺省 ON/OFF）/ value | form-switch |
input[data-type="choose"] | 点击弹层选择器（a.loadpage 选值回填）；可配输入实时联动 | data-url / data-title / data-width / data-height / data-contenturl | form-choose |
input[data-type="multipled"] | 双栏穿梭多选，全量 / 单项移动，值逗号拼接 | data-value（全部候选）/ value（已选） | form-multipled |
input[data-type="labels"] | 多行标签增删，末行 focus 自动加行 | data-limiter（缺省逗号）/ data-help | form-labels |
input[data-type="inpselect"] | 输入框 + 按钮连体，按钮执行全局方法 | data-btn-text（缺省“获取”）/ onbtnclick | form-inpselect |
上传控件 · 7 个
| 控件 | 引擎行为 | 关键属性 | 详情页 |
|---|---|---|---|
input[data-type="file"] | 单文件上传，值存 JSON 数组 [{name,url}] 文件卡片 | data-url（必填）/ data-uptype=auto|complete|slice | form-file |
input[data-type="files"] | 多文件上传，可多选追加 | data-url（必填）/ data-uptype | form-files |
input[data-type="upload"] | 极简单文件上传：文件图标 + 选择按钮 | data-url（必填）/ value（成功写入 url） | form-upload |
input[data-type="video"] | 视频上传：本地预览或上传 URL，播放器 + 进度条 | data-url（必填）/ value | form-video（样式） |
input[data-type="image"] | 单图上传：canvas 底图 / data-cover，点击换图 | data-url（必填）/ data-cover / data-format_width / data-format_height / data-width / data-height / wx-size_type / wx-source_type / wx_noriginal / wx_nocompressed | form-image（样式） |
input[data-type="images"] | 图集：缩略图渲染、双击删除、readonly 阅读模式 | data-url / readonly / data-width / data-height / wx-size_type / wx-source_type | form-images |
input[data-type="imgurls"] | 轮播图集：图 + 链接双输入，左 / 右 / 删除 | data-url（必填）/ data-format_width / data-format_height / data-width / data-height | form-imgurls（样式） |
输入增强 · 7 个
| 控件 | 引擎行为 | 关键属性 | 详情页 |
|---|---|---|---|
input[data-type="date"] | 日期选择，须 a.plugIn.datetime 扩展 | data-format（缺省 YYYY-mm-dd HH:ii:ss）/ data-s_timestamp / data-e_timestamp | form-date |
input[data-type="datetime"] | 日期时间选择，须 a.plugIn.datetime 扩展 | data-format / data-s_timestamp / data-e_timestamp | form-datetime |
input[data-type="color"] | 取色器 a.color，写入 #rrggbb 色卡 | value | form-color |
input[data-type="price"] | 金额实时过滤（a.validata），非法清空 | name="$xx" 提交换强校验 | form-price |
input[data-type="sms"] | 短信验证码 + 60s 倒计时 | placeholder / onbeforeactivate(callback)（发送验证码并回调） | form-sms |
input[data-type="sign"] | 手写签名板，base64 存值，须 a.plugIn.PenSigner | value | form-sign |
textarea[data-type="listing"] | 多行列表（与 labels 同构），行样式 card form-input | data-limiter / data-help | form-listing |
数据编辑 · 5 个
| 控件 | 引擎行为 | 关键属性 | 详情页 |
|---|---|---|---|
input[data-type="json"] | 键值对 JSON 编辑器，值存 JSON 对象字符串 | value / sync() | form-json |
input[data-type="arrays"] | 二维数组（多列行）编辑，值存 JSON 数组 | data-name（必填）/ data-desc / data-value（冒号分隔） | form-arrays |
input[data-type="infinite"] | 无限级联选择（省市区），getFullname / getName | data-url（必填，init 即请求）/ value | form-infinite |
input[data-type="location"] | 微信定位 + 腾讯反地址解析回填 | data-url（必填）/ placeholder / value | form-location |
input[type="latlng"] | 腾讯地图选点（a.loadpage），回传 {lat,lng} | type="latlng" / data-url / data-title / placeholder / value | form-latlng |
下拉增强 · 2 个
| 控件 | 引擎行为 | 关键属性 | 详情页 |
|---|---|---|---|
select[data-type="api"] | AJAX 树形级联下拉：支持 pid / isdefault，onreload 刷新 | data-url（必填）/ data-value；返回 data[].id / name / pid / isdefault | form-select（样式） |
select[data-type] | 通用：按 data-value 选中对应 option | data-type / data-value | form-select（样式） |
编辑器 · 2 个
| 控件 | 引擎行为 | 关键属性 | 详情页 |
|---|---|---|---|
textarea[type="editor"] | 富文本编辑器（a.plugIn.Editor 扩展，card-editor 容器） | type="editor" / data-name / value（html） | form-editor |
textarea[type="richtext"] | 富文本编辑器（复用 KindEditor / UE.getEditor） | type="richtext" / data-name / value（html） | form-richtext |
表单 Form · 39 张详情页
表单输入统一用
form-input 类包裹（input / textarea / select），配 label label-text 字段标签。共 39 张详情页，分 10 组：基础、输入字段、选择控件、按钮与标签、上传控件、输入增强、数据编辑、编辑器、布局修饰与数据校验。
提示： 39 张详情页按 base → input → textarea → select → number → search → checkbox → radio → switch → choose → multipled → labels → inpselect → button → label → file → files → upload → video → image → images → imgurls → date → datetime → color → price → sms → sign → listing → json → arrays → infinite → location → latlng → editor → richtext → line → modifier → data 顺序编排，首末页循环互指（data ↔ base）。
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI ·
返回首页