表单对象 form
監聽提交事件
監聽下拉框改變事件
監聽復選框改變事件
監聽開關改變事件
監聽單選框選中事件
元素渲染
表單初始賦值
表單驗證
使用方法? lay-verify="required|phone"
相關的值
required ?非空驗證
phone ?手機號驗證
number 數值驗證
url ?鏈接地址驗證
自定義驗證
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>表單元素</title> <link rel="stylesheet" href="resources/layui/css/layui.css"></head> <body style="padding: 20px"><form class="layui-form " action="" lay-filter="dataFrm"><div class="layui-form-item"><label class="layui-form-label">用戶名:</label><div class="layui-input-block"><input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="用戶名" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">用戶密碼:</label><div class="layui-input-block"><input type="password" name="pwd" lay-verify="pass" autocomplete="off" placeholder="用戶名密碼" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">用戶手機</label><div class="layui-input-inline"><input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">用戶郵箱</label><div class="layui-input-inline"><input type="text" name="email" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><label class="layui-form-label">籍貫</label><div class="layui-input-block"><select name="jiguan" lay-filter="jiguan" id="jiguan" lay-search=""><option value="武漢">武漢</option><option value="上海">上海</option><option value="北京">北京</option></select></div></div><div class="layui-form-item"><label class="layui-form-label">性別</label><div class="layui-input-block"><input type="radio" name="sex" lay-filter="sex" value="男" title="男" checked=""><input type="radio" name="sex" lay-filter="sex" value="女" title="女"><input type="radio" name="sex" lay-filter="sex" value="禁" title="禁用" disabled=""></div></div><div class="layui-form-item"><label class="layui-form-label">愛好</label><div class="layui-input-block"><input type="checkbox" lay-filter='hobby' value="寫作" name="hobby" title="寫作"><input type="checkbox" lay-filter='hobby' value="閱讀" name="hobby" title="閱讀" ><input type="checkbox" lay-filter='hobby' value="游戲" name="hobby" title="游戲"></div></div><div class="layui-form-item"><label class="layui-form-label">是否在職</label><div class="layui-input-block"><input type="checkbox" name="ishere" lay-filter="ishere" lay-skin="switch" lay-text="是|否"></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button><button type="button" class="layui-btn" id="btn1">向select里面添加一個深圳</button><button type="button" class="layui-btn" id="btn2">初始化表單</button></div></div></form><script src="resources/layui/layui.js"></script><script type="text/javascript">layui.use([ 'element', 'jquery', 'laydate', 'form'],function() {var $ = layui.jquery;var element = layui.element;var laydate = layui.laydate;var form = layui.form;//監聽提交事件form.on('submit(demo1)', function(data){console.log(data.elem) //被執行事件的元素DOM對象，一般為button對象console.log(data.form) //被執行提交的form對象，一般在存在form標簽時才會返回console.log(data.field) //當前容器的全部表單字段，名值對形式：{name: value}//使用ajax提交//$.post();return false; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。});//監聽下拉框的改變事件form.on('select(jiguan)', function(data){console.log(data.elem); //得到select原始DOM對象console.log(data.value); //得到被選中的值console.log(data.othis); //得到美化后的DOM對象}); //監聽checkbox框的改變事件form.on('checkbox(hobby)', 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(ishere)', 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對象}); //監聽radio的改變事件form.on('radio(sex)', function(data){console.log(data.elem); //得到radio原始DOM對象console.log(data.value); //被點擊的radio的value值}); //向select里面添加一個深圳$("#btn1").click(function(){//得到select對象var jg=$("#jiguan");alert(jg.html());jg.append("<option value=深圳>深圳</option>");alert(jg.html());//form.render("select");//渲染下拉框form.render(); //渲染所有});//初始化表單$("#btn2").click(function(){form.val("dataFrm",{username:'張大明',pwd:'123456',phone:'13311112222',email:'1231312@qq.com',jiguan:'北京',sex:'女',//hobby:["寫作","閱讀","游戲"],ishere:false});var hobby="寫作,游戲";var hobbys=hobby.split(",");//得到hobbyElemvar hobbyElem=$("[name='hobby']");$.each(hobbys,function(i,str){alert(str);$.each(hobbyElem,function(j,item){var jdom=$(item);// 把dom--轉jdomif(jdom.val()==str){jdom.attr("checked","checked");}})})form.render();});//擴展自定義驗證規則form.verify({username: [/^[\S]{6,12}$/,'用戶名必須6到12位間，且不能出現空格'] ,pass: [/^[\S]{6,12}$/,'密碼必須6到12位，且不能出現空格'] });});</script> </body> </html>
總結
