解决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 相关文章推荐
javascript引用对象的方法代码
Aug 13 Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
JQuery学习总结【二】
Dec 01 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 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实现的下载css文件中的图片的代码
2010/02/08 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
关于COOKIE个数与大小的问题
2011/01/17 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
python编写爬虫小程序
2015/05/14 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
政府法律服务方案
2014/06/14 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
学校会议通知范文
2015/04/15 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python
Java实现简单小画板
2022/06/10 Java/Android