1.使用
layui 針對各種表單元素做了較為全面的UI支持，你無需去書寫那些 UI 結構，你只需要寫 HTML 原始的 input、select、textarea 這些基本的標簽即可。我們在 UI 上的渲染只要求一點，你必須給表單體系所在的父元素加上class="layui-form"，一切的工作都會在你加載完form模塊后，自動完成。如下是一個最基本的例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui.form小例子</title> <link rel="stylesheet" href="layui.css" media="all"> </head> <body> <form class="layui-form"> <!-- 提示：如果你不想用form，你可以換成div等任何一個普通元素 --> <div class="layui-form-item"> <label class="layui-form-label">輸入框</label> <div class="layui-input-block"> <input type="text" name="" placeholder="請輸入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">下拉選擇框</label> <div class="layui-input-block"> <select name="interest" lay-filter="aihao"> <option value="0">寫作</option> <option value="1">閱讀</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">復選框</label> <div class="layui-input-block"> <input type="checkbox" name="like[write]" title="寫作"> <input type="checkbox" name="like[read]" title="閱讀"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">開關關</label> <div class="layui-input-block"> <input type="checkbox" lay-skin="switch"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">開關開</label> <div class="layui-input-block"> <input type="checkbox" checked lay-skin="switch"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">單選框</label> <div class="layui-input-block"> <input type="radio" name="sex" value="0" title="男"> <input type="radio" name="sex" value="1" title="女" checked> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">請填寫描述</label> <div class="layui-input-block"> <textarea 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="*">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> <!-- 更多表單結構排版請移步文檔左側【頁面元素-表單】一項閱覽 --> </form> <script src="layui.js"></script> <script> layui.use('form', function(){ var form = layui.form; //各種基於事件的操作，下面會有進一步介紹 }); </script> </body> </html>
2.更新渲染
第一個參數：type，為表單的 type 類型，可選。默認對全部類型的表單進行一次更新。
select：刷新select選擇框渲染
checkbox：刷新checkbox復選框（含開關）渲染
radio：刷新radio單選框框渲染
form.render(); //更新全部
form.render('select'); //刷新select選擇框渲染
//……
第二個參數：filter，為 class="layui-form" 所在元素的 lay-filter="" 的值。你可以借助該參數，對表單完成局部更新。
【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" 所在容器內的全部表單狀態 form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器內的全部 select 狀態 //……
3.預設元素屬性
<input type="text" lay-verify="email"> <input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密"> <button lay-submit>提交</button>
上述的lay-verify、lay-skin、lay-filter、lay-submit神馬的都是我們所說的預設的元素屬性，他們可以使得一些交互操作交由form模塊內部、或者你來借助form提供的JS接口精確控制。
| 屬性名 | 屬性值 | 說明 | |
| title | 任意字符 | 設定元素名稱，一般用於checkbox、radio框 | |
| lay-skin | switch（開關風格） primary（原始風格） | 定義元素的風格，目前只對 checkbox 元素有效，可將其轉變為開關樣式 | |
| lay-ignore | 任意字符或不設值 | 是否忽略元素美化處理。設置后，將不會對該元素進行初始化渲染，即保留系統風格 | |
| lay-filter | 任意字符 | 事件過濾器，主要用於事件的精確匹配，跟選擇器是比較類似的。其實它並不私屬於form模塊，它在 layui 的很多基於事件的接口中都會應用到。 | |
| lay-verify | required（必填項） phone（手機號） email（郵箱） url（網址） number（數字） date（日期） identity（身份證） 自定義值 |
同時支持多條規則的驗證，格式：lay-verify="驗證A|驗證B" 如：lay-verify="required|phone|number" 另外，除了內置的校驗規則，還可以給他設定任意的值，比如lay-verify="pass"，那么你就需要借助form.verify()方法對pass進行一個校驗規則的定義。 |
|
| lay-verType | tips（吸附層） alert（對話框） msg（默認） |
用於定義異常提示層模式。 | |
| lay-reqText |
|
用於自定義必填項（即設定了 lay-verify="required" 的表單）的提示文本 | |
| lay-submit | 無需填寫值 |
|
4.事件監聽
語法：form.on('event(過濾器值)', callback);
select：監聽select下拉選擇事件
checkbox：監聽checkbox復選框勾選事件
switch：監聽checkbox復選框開關事件
radio：監聽radio單選框事件
submit：監聽表單提交事件
默認情況下，事件所監聽的是全部的form模塊元素，但如果你只想監聽某一個元素，使用事件過濾器即可。
如：<select lay-filter="test"></select>
form.on('select(test)', function(data){
console.log(data);
});
監聽select選擇
form.on('select(filter)', function(data){
console.log(data.elem); //得到select原始DOM對象
console.log(data.value); //得到被選中的值
console.log(data.othis); //得到美化后的DOM對象
});
請注意：如果你想監聽所有的select，去掉過濾器(filter)即可。
監聽checkbox復選
復選框點擊勾選時觸發，回調函數返回一個object參數，攜帶兩個成員：
form.on('checkbox(filter)', function(data){
console.log(data.elem); //得到checkbox原始DOM對象
console.log(data.elem.checked); //是否被選中，true或者false
console.log(data.value); //復選框value值，也可以通過data.elem.value得到
console.log(data.othis); //得到美化后的DOM對象
});
監聽switch開關
開關被點擊時觸發，回調函數返回一個object參數，攜帶兩個成員：
form.on('switch(filter)', function(data){
console.log(data.elem); //得到checkbox原始DOM對象
console.log(data.elem.checked); //開關是否開啟，true或者false
console.log(data.value); //開關value值，也可以通過data.elem.value得到
console.log(data.othis); //得到美化后的DOM對象
});
監聽radio單選
radio單選框被點擊時觸發，回調函數返回一個object參數，攜帶兩個成員：
form.on('radio(filter)', function(data){
console.log(data.elem); //得到radio原始DOM對象
console.log(data.value); //被點擊的radio的value值
});
監聽submit提交
按鈕點擊或者表單被執行提交時觸發，其中回調函數只有在驗證全部通過后才會進入，回調返回三個成員：
form.on('submit(*)', function(data){
console.log(data.elem) //被執行事件的元素DOM對象，一般為button對象
console.log(data.form) //被執行提交的form對象，一般在存在form標簽時才會返回
console.log(data.field) //當前容器的全部表單字段，名值對形式：{name: value}
return false; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。
});
5.表單取值/賦值
語法：form.val('filter', object);
用於給指定表單集合的元素賦值和取值。如果 object 參數存在，則為賦值；如果 object 參數不存在，則為取值。
//給表單賦值
form.val("formTest", { //formTest 即 class="layui-form" 所在元素屬性 lay-filter="" 對應的值
"username": "賢心" // "name": "value"
,"sex": "女"
,"auth": 3
,"check[write]": true
,"open": false
,"desc": "我愛layui"
});
//獲取表單區域所有值
var data1 = form.val("formTest");
6.表單驗證
大多數時候你只需要在表單元素上加上 lay-verify="" 屬性值即可。
<input type="text" lay-verify="email"> 還同時支持多條規則的驗證，如下： <input type="text" lay-verify="required|phone|number">
自定義驗證規則如下
form.verify({
username: function(value, item){ //value：表單的值、item：表單的DOM對象
if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
return '用戶名不能有特殊字符';
}
if(/(^\_)|(\__)|(\_+$)/.test(value)){
return '用戶名首尾不能出現下划線\'_\'';
}
if(/^\d+\d+\d$/.test(value)){
return '用戶名不能全為數字';
}
}
//我們既支持上述函數式的方式，也支持下述數組的形式
//數組的兩個值分別代表：[正則匹配、匹配不符時的提示文字]
,pass: [
/^[\S]{6,12}$/
,'密碼必須6到12位，且不能出現空格'
]
});
當你自定義了類似上面的驗證規則后，你只需要把 key 賦值給輸入框的 lay-verify 屬性即可：
<input type="text" lay-verify="username" placeholder="請輸入用戶名"> <input type="password" lay-verify="pass" placeholder="請輸入密碼">