解决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 相关文章推荐
JQuery跨Iframe选择实现代码
Aug 19 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
Python语言描述连续子数组的最大和
2018/01/04 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
python tkinter实现屏保程序
2019/07/30 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
2014年情人节活动方案
2014/02/16 职场文书
信息总监管理职责范本
2014/03/08 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
圆明园观后感
2015/06/03 职场文书
2016年教师节感言
2015/12/09 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript