# 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>