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