解决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 相关文章推荐
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
angular中的cookie读写方法
Aug 02 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 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
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
使用Python开发windows GUI程序入门实例
2014/10/23 Python
简单了解什么是神经网络
2017/12/23 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
Django权限控制的使用
2021/01/07 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
六年级学生评语大全
2014/12/26 职场文书
校车安全管理责任书
2015/05/11 职场文书
三十年同学聚会感言
2015/07/30 职场文书
小学班主任研修日志
2015/11/13 职场文书
初三数学教学反思
2016/02/17 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers