解决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+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
如何提高数据访问速度
Dec 26 Javascript
tab栏切换原理
Mar 22 Javascript
Vue.use源码分析
Apr 22 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
通过javascript实现段落的收缩与展开
Jun 26 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 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
PHP静态文件生成类实例
2014/11/29 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
jQuery的框架介绍
2016/05/11 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
详解jquery和vue对比
2019/04/16 jQuery
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
python将ansible配置转为json格式实例代码
2017/05/15 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
python的数学算法函数及公式用法
2020/11/18 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
Android interview questions
2016/12/25 面试题
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
初二政治教学反思
2014/01/12 职场文书
超级搞笑检讨书
2014/01/15 职场文书
秋游活动策划方案
2014/02/16 职场文书
会计专业导师推荐信
2014/03/08 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
新年团拜会主持词
2014/04/02 职场文书
2015试用期转正工作总结
2014/12/12 职场文书