解决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 相关文章推荐
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
javascript中scrollTop详解
Apr 13 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
react-native android状态栏的实现
Jun 15 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
Vue基础配置讲解
Nov 29 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
用Python输出一个杨辉三角的例子
2014/06/13 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
python 一维二维插值实例
2020/04/22 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
python代码实现图书管理系统
2020/11/30 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
八一演出活动方案
2014/02/03 职场文书
大家检讨书5000字
2014/02/03 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
新闻传播专业求职信
2014/07/22 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库