1. 在一個容器中設定class="layui-form"來標識一個表單元素塊, 通過規(guī)范好的html結構及CSS類, 來組裝成各式各樣的表單元素, 并通過內置的form模塊來完成各種交互。

2. 表單元素依賴form模塊。(請注意: 如果不加載form模塊, select、checkbox、radio等將無法顯示, 并且無法使用form相關功能)。

3. 表單容器

3.1. form元素添加class="layui-form"屬性, 作為layui的表單容器:

<form class="layui-form" action="" method="post"> 表單元素... </form>

4. 基本的行區(qū)塊結構

<div class="layui-form-item"><label class="layui-form-label">標簽區(qū)域</label><div class="layui-input-block">原始表單元素區(qū)域</div> </div><div class="layui-form-item"><label class="layui-form-label">標簽區(qū)域</label><div class="layui-input-inline">原始表單元素區(qū)域</div><div class="layui-form-mid layui-word-aux">輔助文字</div> </div>

5. 預設表單元素屬性

5.1. 預設表單元素屬性可以使得一些交互操作交由form模塊內部、或者你來借助form提供的JS接口精確控制。目前可支持的屬性如下表所示:

6. 輸入框

6.1. class="layui-input": layui.css提供的通用CSS類。

6.2. lay-verify: 注冊form模塊需要驗證的類型。

<input type="text" name="title" lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input" /> <input type="password" name="password" placeholder="請輸入密碼" autocomplete="off" class="layui-input"> <input type="text" name="mobile" lay-verify="phone" placeholder="請輸入手機號" class="layui-input">

7. 下拉選擇框

7.1. 通過設定屬性lay-search來開啟搜索匹配功能:

<select name="city" lay-search><option value="">請選擇一個城市</option><option value="0">北京</option><option value="1">鄭州</option><option value="2">洛陽</option><option value="3">南陽</option><option value="4">開封</option> </select>

8. 復選框

8.1. 屬性title可自定義文本。

8.2. 屬性lay-skin可設置復選框的風格。一般不寫或者lay-skin="primary"。

<input type="checkbox" name="write" title="寫作"> <input type="checkbox" name="read" title="閱讀" checked> <input type="checkbox" name="dai" lay-skin="primary" title="發(fā)呆">

9. 開關

9.1. 屬性lay-text可自定義開關兩種狀態(tài)的文本。

9.2. 屬性lay-skin可設置復選框的風格。通常是lay-skin="switch"。

<input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF">

10. 單選框

10.1. 屬性title可自定義文本。

<input type="radio" name="sex" value="男" title="男"> <input type="radio" name="sex" value="女" title="女" checked>

11. 文本域

11.1. class="layui-textarea", layui.css提供的通用CSS類。

<textarea name="desc" placeholder="請輸入內容" class="layui-textarea"></textarea>

12. 組裝行內表單

12.1. class="layui-inline": 定義外層行內。

12.2. class="layui-input-inline": 定義內層行內。(class="layui-input-block": 定義內層塊。)

<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">范圍</label><div class="layui-input-inline" style="width: 100px;"><input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input"></div><div class="layui-form-mid">-</div><div class="layui-input-inline" style="width: 100px;"><input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input"></div></div> </div>

13. 忽略美化渲染

13.1. 你可以對表單元素增加屬性lay-ignore設置后, 將不會對該標簽進行美化渲染, 即保留系統(tǒng)風格, 比如:

<select lay-ignore><option>…</option> </select>

14. 表單方框風格

14.1. 通過追加layui-form-pane的class,來設定表單的方框風格。

14.2. 值得注意的是復選框/開關/單選框, 這些組合在該風格下需要額外添加pane屬性(否則會看起來比較別扭)。

<form class="layui-form layui-form-pane" action=""><div class="layui-form-item" pane><label class="layui-form-label">單選框</label><div class="layui-input-block"><input type="radio" name="sex" value="男" title="男"><input type="radio" name="sex" value="女" title="女" checked></div></div> </form>

15. 更新渲染

15.1. 有些時候, 你的有些表單元素可能是動態(tài)插入的。這時form模塊的自動化渲染是會對其失效的。但沒有關系, 你只需要執(zhí)行form.render(type, filter);方法即可。

15.2. 第一個參數(shù): type為表單的type類型, 可選。默認對全部類型的表單進行一次更新。可局部刷新的type如下表:

form.render(); // 更新全部 form.render('select'); // 刷新select選擇框渲染

15.3. 第二個參數(shù): filter為class="layui-form"所在元素的lay-filter=""的值。你可以借助該參數(shù), 對表單完成局部更新。

[HTML] <div class="layui-form" lay-filter="test1">... </div><div class="layui-form" lay-filter="test2">... </div>[JavaScript] form.render(null, 'test1'); // 更新lay-filter="test1"所在容器內的全部表單狀態(tài) form.render('select', 'test2'); // 更新lay-filter="test2"所在容器內的全部select狀態(tài)

16. 事件監(jiān)聽

16.1. 語法: form.on('event(過濾器值)', callback);

16.2. form模塊在layui事件機制中注冊了專屬事件, 所以當你使用layui.onevent()自定義模塊事件時, 請勿占用form名。form支持的事件如下:

16.3. 默認情況下, 事件所監(jiān)聽的是全部的form模塊元素, 但如果你只想監(jiān)聽某一個元素, 使用事件過濾器即可。

17. 監(jiān)聽select選擇

17.1. 下拉選擇框被選中時觸發(fā), 回調函數(shù)返回一個object參數(shù), 攜帶兩個成員:

form.on('select', function(data){console.log(data.elem); // 得到select原始DOM對象console.log(data.value); // 得到被選中的值console.log(data.othis); // 得到美化后的DOM對象 });

18. 監(jiān)聽checkbox復選

18.1. 復選框點擊勾選時觸發(fā), 回調函數(shù)返回一個object參數(shù), 攜帶兩個成員:

form.on('checkbox(checkbox1)', function(data){console.log(data.elem); // 得到checkbox原始DOM對象console.log(data.elem.checked); // 是否被選中, true或者falseconsole.log(data.value); // 復選框value值, 也可以通過data.elem.value得到console.log(data.othis); // 得到美化后的DOM對象 });

19. 監(jiān)聽switch開關

19.1. 開關被點擊時觸發(fā), 回調函數(shù)返回一個object參數(shù), 攜帶兩個成員:

form.on('switch', function(data){console.log(data.elem); // 得到checkbox原始DOM對象console.log(data.elem.checked); // 開關是否開啟, true或者falseconsole.log(data.value); // 開關value值, 也可以通過data.elem.value得到console.log(data.othis); // 得到美化后的DOM對象 });

20. 監(jiān)聽radio單選

20.1. radio單選框被點擊時觸發(fā), 回調函數(shù)返回一個object參數(shù), 攜帶兩個成員:

form.on('radio', function(data){console.log(data.elem); // 得到radio原始DOM對象console.log(data.value); // 被點擊的radio的value值 });

21. 監(jiān)聽submit提交

21.1. 按鈕點擊或者表單被執(zhí)行提交時觸發(fā), 其中回調函數(shù)只有在驗證全部通過后才會進入, 回調返回三個成員:

form.on('submit', function(data){console.log(data.elem) // 被執(zhí)行事件的元素DOM對象, 一般為button對象console.log(data.form) // 被執(zhí)行提交的form對象, 一般在存在form標簽時才會返回console.log(data.field) // 當前容器的全部表單字段, 名值對形式: {name: value}return false; // 阻止表單跳轉。如果需要表單跳轉, 去掉這段即可。 });

22. 表單賦值/取值

22.1. 語法: form.val('filter', object);用于給指定表單集合的元素賦值和取值。如果object參數(shù)存在, 則為賦值; 如果object參數(shù)不存在, 則為取值。第二個參數(shù)中的鍵值是表單元素對應的name和value。

// 給表單賦值 form.val("form1", { // class="layui-form"所在元素屬性lay-filter="form1"對應的值"city": 2,"desc": "我是一個有理想的人。","mobile": 13552464800,"password": 123456,"read": "閱讀","sex": "女","title": "注冊新用戶","switch": "register" });// 獲取表單區(qū)域所有值 var form1Values = form.val("form1");

23. 表單驗證

23.1. 我們對表單的驗證進行了非常巧妙的支持, 大多數(shù)時候你只需要在表單元素上加上lay-verify=""屬性值即可。

<input type="password" name="password" placeholder="請輸入密碼" autocomplete="off" class="layui-input"> <input type="text" name="mobile" lay-verify="phone" placeholder="請輸入手機號" class="layui-input">

23.2. 除了內置的校驗規(guī)則外, 你還可以自定義驗證規(guī)則, 通常對于比較復雜的校驗, 這是非常有必要的。當你自定義了驗證規(guī)則后, 你只需要把key賦值給輸入框的lay-verify屬性即可。

<input type="text" name="title" lay-verify="required|title" placeholder="請輸入標題" autocomplete="off" class="layui-input" />// 自定義驗證規(guī)則 form.verify({title: function(value, item){if(!new RegExp("^[a-zA-Z0-9_]+$").test(value)){return '標題內容是大小字母、數(shù)字、下劃線';}if(value.length < 5){return '標題也太短了吧';}if(value.length > 16){return '標題也太長了吧';}} });

23.2. form.verify()方法回調函數(shù)中, value: 表單的值; item: 表單的DOM對象。

24. 例子

24.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>表單元素 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" type="text/javascript" src="layui/layui.js"></script></head><body><form class="layui-form layui-form-pane" action="" method="post" lay-filter="form1"><div class="layui-form-item"><label class="layui-form-label">輸入框</label><div class="layui-input-block"><input type="text" name="title" lay-verify="required|title" placeholder="請輸入標題" autocomplete="off" class="layui-input" /></div></div><div class="layui-form-item"><label class="layui-form-label">密碼框</label><div class="layui-input-inline"><input type="password" name="password" placeholder="請輸入密碼" autocomplete="off" class="layui-input"></div><div class="layui-form-mid layui-word-aux">6-16位字母、數(shù)字、下劃線組合</div></div><div class="layui-form-item"><label class="layui-form-label">手機號</label><div class="layui-input-inline"><input type="text" name="mobile" lay-verify="phone" placeholder="請輸入手機號" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">選擇框</label><div class="layui-input-block"><select name="city" lay-search><option value="">請選擇一個城市</option><option value="0">北京</option><option value="1">鄭州</option><option value="2" selected="select">洛陽</option><option value="3">南陽</option><option value="4">開封</option></select></div></div><div class="layui-form-item" pane lay-filter="test1111"><label class="layui-form-label">復選框</label><div class="layui-input-block"><input type="checkbox" name="write" title="寫作" value="寫作" lay-filter="checkbox1"><input type="checkbox" name="read" title="閱讀" value="閱讀" checked><input type="checkbox" name="dai" lay-skin="primary" title="發(fā)呆" value="發(fā)呆"></div></div><div class="layui-form-item" pane><label class="layui-form-label">開關</label><div class="layui-input-block"><input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" checked="checked" value="register"></div></div><div class="layui-form-item" pane><label class="layui-form-label">單選框</label><div class="layui-input-block"><input type="radio" name="sex" value="男" title="男"><input type="radio" name="sex" value="女" title="女" checked></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">文本域</label><div class="layui-input-block"><textarea name="desc" placeholder="請輸入內容" class="layui-textarea"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form><script type="text/javascript">layui.use(['form', 'laydate'], function(){var form = layui.form,laydate = layui.laydate;laydate.render({elem: '#date',value: new Date(),isInitValue: true});// 自定義驗證規(guī)則form.verify({title: function(value, item){if(!new RegExp("^[a-zA-Z0-9_]+$").test(value)){return '標題內容是大小字母、數(shù)字、下劃線';}if(value.length < 5){return '標題也太短了吧';}if(value.length > 16){return '標題也太長了吧';}}});form.on('select', function(data){console.log(data.elem); // 得到select原始DOM對象console.log(data.value); // 得到被選中的值console.log(data.othis); // 得到美化后的DOM對象}); form.on('checkbox(checkbox1)', function(data){console.log(data.elem); // 得到checkbox原始DOM對象console.log(data.elem.checked); // 是否被選中, true或者falseconsole.log(data.value); // 復選框value值, 也可以通過data.elem.value得到console.log(data.othis); // 得到美化后的DOM對象}); form.on('switch', function(data){console.log(data.elem); // 得到checkbox原始DOM對象console.log(data.elem.checked); // 開關是否開啟, true或者falseconsole.log(data.value); // 開關value值, 也可以通過data.elem.value得到console.log(data.othis); // 得到美化后的DOM對象}); form.on('radio', function(data){console.log(data.elem); // 得到radio原始DOM對象console.log(data.value); // 被點擊的radio的value值}); form.on('submit', function(data){console.log(data.elem) // 被執(zhí)行事件的元素DOM對象, 一般為button對象console.log(data.form) // 被執(zhí)行提交的form對象, 一般在存在form標簽時才會返回console.log(data.field) // 當前容器的全部表單字段, 名值對形式: {name: value}// return false; // 阻止表單跳轉。如果需要表單跳轉, 去掉這段即可。});var form1Values = form.val("form1");console.log(form1Values);});</script></body> </html>

24.2. 效果圖

總結

以上是生活随笔為你收集整理的031-表单元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。