解决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的Eval函数
Jul 26 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 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人民币金额转大写实例代码
2015/10/02 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
keras K.function获取某层的输出操作
2020/06/29 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
大专应届生个人的自我评价
2013/11/21 职场文书
高中毕业生自我鉴定例文
2013/12/29 职场文书
运动会广播稿100字
2014/01/11 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python