解决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 相关文章推荐
gridpanel动态加载数据的实例代码
Jul 18 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
jquery分割字符串的方法
Jun 24 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
js自定义input文件上传样式
Oct 26 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
js简单粗暴的发布订阅示例代码
Jan 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+redis实现微博的推模型案例分析
2019/07/10 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
sails框架的学习指南
2014/12/22 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
详解python中的Turtle函数库
2018/11/19 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
pytorch中的inference使用实例
2020/02/20 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
Python日志处理模块logging用法解析
2020/05/19 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
幼儿园毕业教师感言
2014/02/21 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
车间核算员岗位职责
2014/07/01 职场文书
优化Mysql查询的示例
2022/04/26 MySQL
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python