解決layer彈出層中表單不起作用的問(wèn)題
如下所示:
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="請(qǐng)輸入角色名" 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="請(qǐng)輸入角色描述" 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="開(kāi)啟|關(guān)閉"></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, // 點(diǎn)擊遮罩關(guān)閉
content : html,
btn : [ '確認(rèn)', '取消' ],
success : function(index, layero) { // 成功彈出后回調(diào)
form.render('checkbox'); // 刷新checkbox開(kāi)關(guān)渲染(否則開(kāi)關(guān)按鈕會(huì)不顯示)
},
yes : function(index, layero) { // 確認(rèn)按鈕回調(diào)函數(shù)
layero.find('#addRole').click();
},
btn2 : function(index, layero) { // 取消按鈕回調(diào)函數(shù)
layer.close(index); // 關(guān)閉彈出層
}
});
我的彈出層表單驗(yàn)證不起作用的原因是將彈框參數(shù)type設(shè)置成0了,將type改為1之后表單就起作用了
layer.open({
type : 1,
title : '添加角色',
area : [ '500px', '400px' ],
shadeClose : true, // 點(diǎn)擊遮罩關(guān)閉
content : html,
btn : [ '確認(rèn)', '取消' ],
success : function(index, layero) { // 成功彈出后回調(diào)
form.render('checkbox'); // 刷新checkbox開(kāi)關(guān)渲染(否則開(kāi)關(guān)按鈕會(huì)不顯示)
},
yes : function(index, layero) { // 確認(rèn)按鈕回調(diào)函數(shù)
layero.find('#addRole').click();
},
btn2 : function(index, layero) { // 取消按鈕回調(diào)函數(shù)
layer.close(index); // 關(guān)閉彈出層
}
});
以上這篇解決layer彈出層中表單不起作用的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
BootStrap Validator使用注意事項(xiàng)(必看篇)
針對(duì)bootstrap2和bootstrap3有不同的版本,在使用bootstrap validator時(shí)需要了解其注意事項(xiàng),下面小編把我遇到的注意事項(xiàng)分享給大家,供大家參考2016-09-09
JS簡(jiǎn)單實(shí)現(xiàn)點(diǎn)擊按鈕或文字顯示遮罩層的方法
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)點(diǎn)擊按鈕或文字顯示遮罩層的方法,涉及javascript鼠標(biāo)事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
webpack打包中path.resolve(__dirname, 'dist')的含義解
這篇文章主要介紹了webpack打包中path.resolve(__dirname, 'dist')的含義解析,path:path.resolve(__dirname, 'dist')就是在打包之后的文件夾上拼接了一個(gè)文件夾,在打包時(shí),直接生成,本文給大家講解的非常詳細(xì),需要的朋友可以參考下2023-05-05
基于JS實(shí)現(xiàn)頁(yè)面視頻video標(biāo)簽禁止下載(下載按鈕+右擊菜單)
最近做項(xiàng)目遇到這樣的需求,禁止用戶(hù)瀏覽頁(yè)面的時(shí)候下載頁(yè)面的視頻,網(wǎng)上看到下載視頻的方法有兩種,本文對(duì)每種方法做詳細(xì)分析,對(duì)js禁止下載視頻相關(guān)知識(shí)感興趣的朋友一起看看吧2024-02-02
快速對(duì)接payjq的個(gè)人微信支付接口過(guò)程解析
這篇文章主要介紹了快速對(duì)接payjq的個(gè)人微信支付接口過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
uniApp獲取當(dāng)前位置經(jīng)緯度的示例代碼
這篇文章主要介紹了uniApp獲取當(dāng)前位置經(jīng)緯度,以下是使用uni.getLocation獲取當(dāng)前位置的示例代碼,需要的朋友可以參考下2024-01-01
微信小程序如何實(shí)現(xiàn)radio單選框單擊打勾和取消
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)radio單選框單擊打勾和取消,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01

