解决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 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
JS async 函数的含义和用法实例总结
Apr 08 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
PHP实现简易图形计算器
2020/08/28 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
对python Tkinter Text的用法详解
2018/10/11 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
怎样写好自我鉴定
2013/12/04 职场文书
银行贷款承诺书
2014/03/29 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python