# Form表單
---
表單組件,基于[jquery-validate](http://www.runoob.com/jquery/jquery-plugin-validate.html),讓表單更簡單。
只需為form標簽加上`data-form=1`即可
```html
data-form="1"
```
### 特點
- 支持`jquery-validate`所有語法。[jquery-validate教程](http://www.runoob.com/jquery/jquery-plugin-validate.html)
- 支持提交前自定義操作。如提交前的確認或提示。
- 交互式提交,默認為`ajax`方式提交
除`jquery-validate`支持的屬性外,`EpiiAdmin`自定了如下屬性。
屬性|意義
---|---
`data-form` | `data-form=1` 轉化普通form表單為智能form表單
`data-before-submit` | `data-before-submit='fun'` 提交前自定義操作
其中 `data-before-submit` 為表單通過驗證后提交到后臺之前所觸發的函數,如果不設置則直接提交。
```html
<script>
function fun1(submit) {
alert("提交前先彈個框!");
submit();//提交表單
}
</script>
<form role="form" data-form="1" data-before-submit="fun1" method="post" action="{:url('demo/index/formajax')}">
<div class="form-group">
<label for="name1">名稱:</label>
<input type="text" class="form-control" name="name1" id="name1" placeholder="請輸入名稱" required>
</div>
<div class="form-group">
<label for="name2">名稱2:</label>
<input type="text" class="form-control" name="name2" id="name2" placeholder="請輸入名稱">
</div>
<div class="form-group">
<label for="name3">名稱3:</label>
<input type="text" class="form-control" name="name3" id="name3" placeholder="請輸入名稱">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">提交</button>
<button type="reset" class="btn btn-default">重置</button>
</div>
</form>
```
在`form`標簽中設置了提交前的自定義函數`fun1`
```html
<form role="form"
data-form="1"
data-before-submit="fun1"
method="post" action="{:url('demo/index/formajax')}">
```
系統會把`提交函數`作為`參數`傳遞給`fun1`,故需要自主提交表單
```html
function fun1(submit) {
alert("提交前先彈個框!");
submit();//提交表單
}
```
效果為
<p>
<video controls="controls" width="100%"
src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/form1.mov"></video>
</p>
>[danger] 特別的,考慮到大部分情況會存在以下需求
> - 在提交表單前彈出 *提醒框* ,只需設置 `data-before-submit='alert'`
> - 在提交表單前彈出 *確認框* ,只需設置 `data-before-submit='confirm'`
#### 1、當`data-before-submit='alert'` 時,可在`form`標簽設置如下屬性。
屬性|意義
---|---
`data-msg` | 提示內容 (必填)
`data-title` | "提示" 提示標題
`data-icon` | 默認為3 ,layer數值
`data-btn` | "確定" 按鈕文字
`data-intop` | 是否在最頂端打開,默認在本窗口打開
我們把上面案例的`form`標簽改為
```html
<form role="form"
data-form="1"
data-before-submit="alert"
data-msg="我只是試試"
data-title="自定義標題"
data-btn="繼續提交表單"
data-intop="1"
method="post" action="{:url('demo/index/formajax')}">
```
效果為:
<p>
<video controls="controls" width="100%"
src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/form2.mov"></video>
</p>
#### 2、當`data-before-submit='confirm'` 時,可在`form`標簽設置如下屬性。
屬性|意義
---|---
`data-msg`| 提示內容 必填
`data-title` | 提示標題
`data-icon` | 默認為3 ,layer數值
`data-btn-ok` | `data-btn-ok="確定"` 按鈕文字
`data-btn-cancel` | "確定" 按鈕文字
`data-intop` | 是否在最頂端打開,默認在本窗口打開
我們把上面案例的`form`標簽改為
```html
<form role="form"
data-form="1"
data-before-submit="confirm"
data-msg="您確定要提交嗎?"
data-title="自定義標題"
data-btn-ok="繼續提交表單"
data-btn-cancel="我不提交"
data-intop="1"
method="post" action="{:url('demo/index/formajax')}">
```
效果為:
<p>
<video controls="controls" width="100%"
src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/form3.mov"></video>
</p>
- 簡介/安裝
- 快速搭建一個用戶中心
- Js代碼寫在哪里
- 環境變量Args
- 前臺組件
- Dialog方式打開頁面
- Addtab方式打開頁面
- Alert提醒框
- Confirm確認框
- Prompt輸入框
- 表單Form
- 列表Table/list
- 基礎Table
- 控制Table
- 搜索Table
- 城市選擇city-picker
- 文件上傳組件
- 基礎版本
- 簡單版本
- 更多實用組件
- 后臺
- 實現方式綜述
- 命令管理類JsCmd
- 命令
- Alert命令
- Url命令
- Toast命令
- JsEval命令
- Close命令
- Refresh命令
- CloseAndRefresh命令
- 常用命令的簡化
- 文件上傳
- 后臺基礎
- 后臺進階
- 左側導航badge配置