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

所属分类: 网络编程 / JavaScript 阅读数: 406
收藏 0 赞 0 分享

如下所示:

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文件加载优化,三种方式实现js文件加载优化,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jQuery on()绑定动态元素出现的问题小结

jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,通过本文给大家介绍jQuery on()绑定动态元素出现的问题小结,需要的朋友参考下
收藏 0 赞 0 分享

基于JavaScript实现弹出框效果

弹出框在网站页面中是必不可少的一部分,今天借助脚本之家平台给大家分享使用js实现简单的弹出框效果,感兴趣的朋友一起学习吧
收藏 0 赞 0 分享

百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换

这篇文章主要介绍了百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript深度复制(deep clone)的实现方法

本文给大家介绍JavaScript深度复制(deep clone)的实现方法,涉及到js深度复制相关知识,本文介绍的非常详细,特此分享脚本之家平台供大家参考
收藏 0 赞 0 分享

jQuery实现简单的DIV拖动效果

这篇文章主要介绍了jQuery实现简单的DIV拖动效果,涉及jQuery针对鼠标事件的响应及页面元素的动态操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

javascript每日必学之循环

javascript每日必学之循环,本文的主要内容就是循环,死循环时进行bug调式,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript下使用Promise封装FileReader

这篇文章主要介绍了javascript下使用Promise封装FileReader,需要的朋友可以参考下
收藏 0 赞 0 分享

js下将金额数字每三位一逗号分隔

这篇文章主要介绍了js下将金额数字每三位一逗号分隔的相关资料,还附加了一个小功能,小数位保留两位,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

使用jQuery的easydrag插件实现可拖动的DIV弹出框

EasyDrag 是一个用来实现页面元素拖拉的 jQuery 插件。接下来通过本文给大家介绍使用jQuery的easydrag插件实现可拖动的DIV弹出框,感兴趣的朋友一起学习吧
收藏 0 赞 0 分享
查看更多