解决layer弹出层中表单不起作用的问题


Posted in Javascript onSeptember 09, 2019

如下所示:

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); // 关闭弹出层
		}
	});

以上这篇解决layer弹出层中表单不起作用的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
浅谈Node.js 沙箱环境
May 15 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
解决layui弹框失效的问题
Sep 09 #Javascript
vue给对象动态添加属性和值的实例
Sep 09 #Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 #Javascript
layui原生表单验证的实例
Sep 09 #Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 #Javascript
layui插件表单验证提交触发提交的例子
Sep 09 #Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 #Javascript
You might like
php格式化日期和时间格式化示例分享
2014/02/24 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
jQuery参数列表集合
2011/04/06 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
JS实现页面打印功能
2017/03/16 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
2种简单的js倒计时方式
2017/10/20 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
python编程实现希尔排序
2017/04/13 Python
200行python代码实现2048游戏
2019/07/17 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
英国高街电视:High Street TV
2018/05/22 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
小班重阳节活动方案
2014/02/08 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
2015年销售工作总结范文
2015/03/30 职场文书