官網源碼：
1 <form class="layui-form" action=""> 2 <div class="layui-form-item"> 3 <label class="layui-form-label">輸入框</label> 4 <div class="layui-input-block"> 5 <input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input"> 6 </div> 7 </div> 8 <div class="layui-form-item"> 9 <label class="layui-form-label">密碼框</label> 10 <div class="layui-input-inline"> 11 <input type="password" name="password" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input"> 12 </div> 13 <div class="layui-form-mid layui-word-aux">輔助文字</div> 14 </div> 15 <div class="layui-form-item"> 16 <label class="layui-form-label">選擇框</label> 17 <div class="layui-input-block"> 18 <select name="city" lay-verify="required"> 19 <option value=""></option> 20 <option value="0">北京</option> 21 <option value="1">上海</option> 22 <option value="2">廣州</option> 23 <option value="3">深圳</option> 24 <option value="4">杭州</option> 25 </select> 26 </div> 27 </div> 28 <div class="layui-form-item"> 29 <label class="layui-form-label">復選框</label> 30 <div class="layui-input-block"> 31 <input type="checkbox" name="like[write]" title="寫作"> 32 <input type="checkbox" name="like[read]" title="閱讀" checked> 33 <input type="checkbox" name="like[dai]" title="發呆"> 34 </div> 35 </div> 36 <div class="layui-form-item"> 37 <label class="layui-form-label">開關</label> 38 <div class="layui-input-block"> 39 <input type="checkbox" name="switch" lay-skin="switch"> 40 </div> 41 </div> 42 <div class="layui-form-item"> 43 <label class="layui-form-label">單選框</label> 44 <div class="layui-input-block"> 45 <input type="radio" name="sex" value="男" title="男"> 46 <input type="radio" name="sex" value="女" title="女" checked> 47 </div> 48 </div> 49 <div class="layui-form-item layui-form-text"> 50 <label class="layui-form-label">文本域</label> 51 <div class="layui-input-block"> 52 <textarea name="desc" placeholder="請輸入內容" class="layui-textarea"></textarea> 53 </div> 54 </div> 55 <div class="layui-form-item"> 56 <div class="layui-input-block"> 57 <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> 58 <button type="reset" class="layui-btn layui-btn-primary">重置</button> 59 </div> 60 </div> 61 </form> 62 63 <script> 64 //Demo 65 layui.use('form', function(){ 66 var form = layui.form; 67 68 //監聽提交 69 form.on('submit(formDemo)', function(data){ 70 layer.msg(JSON.stringify(data.field)); 71 return false; 72 }); 73 }); 74 </script>
運行結果：
解決方法：
導入代碼從
1 <link rel="stylesheet" href="layui/css/layui.css"> 2 <script src="layui/layui.all.js"></script>
換為
1 <link rel="stylesheet" href="layui/css/layui.css" media="all"> 2 <script src="layui/layui.js" type="text/javascript"></script> 3 <script src="jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
即可達到預期效果：
