layer彈出層中表單不起作用的解決方法
阿新 • • 發佈:2018-11-10
var html = '<form class="layui-form" action="">' + '<div class="layui-form-item"><label class="layui-form-label">角色名</label><div class="layui-input-block"><input type="text" name="rolename" required lay-verify="required" placeholder="請輸入角色名" autocomplete="off" class="layui-input"></div></div>' + '<div class="layui-form-item layui-form-text"><label class="layui-form-label">角色描述</label><div class="layui-input-block"><textarea name="roledesc" placeholder="請輸入角色描述" class="layui-textarea"></textarea></div></div>' + '<div class="layui-form-item"><label class="layui-form-label">是否啟用</label><div class="layui-input-block"><input type="checkbox" name="switch" lay-skin="switch" lay-text="開啟|關閉"></div></div>' + '<div class="layui-form-item" hidden><div class="layui-input-block"><button id="addRole" class="layui-btn" lay-submit lay-filter="formDemo">提交</button></div></div>' + '</form>'; layer.open({ type : 0, title : '新增角色', area : [ '500px', '400px' ], shadeClose : true, // 點選遮罩關閉 content : html, btn : [ '確認', '取消' ], success : function(index, layero) { // 成功彈出後回撥 form.render('checkbox'); // 重新整理checkbox開關渲染(否則開關按鈕會不顯示) }, yes : function(index, layero) { // 確認按鈕回撥函式 layero.find('#addRole').click(); }, btn2 : function(index, layero) { // 取消按鈕回撥函式 layer.close(index); // 關閉彈出層 } });
我的彈出層表單驗證不起作用的原因是將彈框引數type設定成0了,將type改為1之後表單就起作用了
layer.open({ type : 1, title : '新增角色', area : [ '500px', '400px' ], shadeClose : true, // 點選遮罩關閉 content : html, btn : [ '確認', '取消' ], success : function(index, layero) { // 成功彈出後回撥 form.render('checkbox'); // 重新整理checkbox開關渲染(否則開關按鈕會不顯示) }, yes : function(index, layero) { // 確認按鈕回撥函式 layero.find('#addRole').click(); }, btn2 : function(index, layero) { // 取消按鈕回撥函式 layer.close(index); // 關閉彈出層 } });