# form表單
* form表單已經集成了快速驗證以及提交的方法,無需手動重組數據再進行提交
* 默認提交的數據是提交當前`url`,如需提交到其它頁面,修改一下`lay-submit`的值即可
* 在對應的js文件內引入`easy-admin`模塊,并執行`ea.listen();`進行監聽
# 必填值
> 使用`lay-verify="required"`,會自動生成必填小紅點, 并且會在提交的時候進行必填驗證
~~~
<div class="layui-form-item">
<label class="layui-form-label">權限名稱</label>
<div class="layui-input-block">
<input type="text" name="title" class="layui-input" lay-verify="required" placeholder="請輸入權限名稱" value="">
<tip>填寫權限名稱。</tip>
</div>
</div>
~~~
# `lay-submit`事件監聽
使用該事件監聽,會自動獲取表單數據以`POST`方式自動提交。
> 與`lay-submit`事件監聽的相關參數:
| 參數 | 說明 | 類型 | 是否必填 | 默認 | 備注 |
| --- | --- | --- | --- | --- | --- |
| lay-submit | 監聽表單自動提交 | string | 是 | 當前地址 | 為空則提交的當前地址。如果需要提交到其它地址,此處填寫對應的地址。 |
| data-refresh | 提交成功后是否需要刷新 | bool | 否 | true | 提交成功后,關閉彈出層,`刷新`父層的`table列表`,如果不需要刷新,或者沒有用到彈出層,此處改為false |
| lay-filter | layui內置過濾器 | string | 否 | 自動生成唯一值 | 無特殊需求,此處無需填寫,會自動生成 |
> 例子
~~~
<div class="layui-form-item text-center">
<button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>確認</button>
<button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
</div>
~~~
# 提交前置操作
> 事件監聽方法:`ea.listen(preposeCallback, ok, no, ex)`,可能用得比較多的還是`preposeCallback`的提交前置回調。
| 參數 | 說明 | 類型 | 是否必填 | 備注 |
| --- | --- | --- | --- | --- |
| preposeCallback | 表單提交前的前置回調 | function | 否 | 一般用于需要重新組裝一些特殊的數據再提交 |
| ok | 提交成功后的回調 | function | 否 | |
| no | 提交失敗后的回調 | function | 否 | |
| ex | 提交異常后的回調 | function | 否 |
~~~
ea.listen(function (data) {
// 此處進行數據重組再返回
data.test = '測試重組數據';
return data;
});
~~~
# 完整例子
~~~
<div class="layuimini-container">
<form id="app-form" class="layui-form layuimini-form">
<div class="layui-form-item">
<label class="layui-form-label">權限名稱</label>
<div class="layui-input-block">
<input type="text" name="title" class="layui-input" lay-verify="required" placeholder="請輸入權限名稱" value="">
<tip>填寫權限名稱。</tip>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">備注信息</label>
<div class="layui-input-block">
<textarea name="remark" class="layui-textarea" placeholder="請輸入備注信息"></textarea>
</div>
</div>
<div class="hr-line"></div>
<div class="layui-form-item text-center">
<button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>確認</button>
<button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
</div>
</form>
</div>
~~~