解决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中的Drag.Move来实现拖放
Sep 15 Javascript
JavaScript 定义function的三种方式小结
Oct 16 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
jquery手风琴特效插件
Feb 04 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
js闭包用法实例详解
Dec 13 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
编写React组件项目实践分析
Mar 04 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php5中类的学习
2008/03/28 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
常用的javascript function代码
2008/05/23 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
javascript 中关于array的常用方法详解
2017/05/05 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
Python with的用法
2014/08/22 Python
python实现查询苹果手机维修进度
2015/03/16 Python
Django中间件实现拦截器的方法
2018/06/01 Python
python反编译学习之字节码详解
2019/05/19 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
资深生产主管自我评价
2013/09/22 职场文书
工商管理实习自我鉴定
2013/09/28 职场文书
投资合作协议书
2014/04/17 职场文书
营销学习心得体会
2014/09/12 职场文书
采购内勤岗位职责
2015/04/13 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript
数据设计之权限的实现
2022/08/05 MySQL