解决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 相关文章推荐
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
js实现盒子拖拽动画效果
Aug 09 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
ftp类(myftp.php)
2006/10/09 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
Python中for循环详解
2014/01/17 Python
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
python实现微信自动回复功能
2018/04/11 Python
Python装饰器原理与用法分析
2018/04/30 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
简述 Python 的类和对象
2020/08/21 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
个人委托书范本
2014/04/02 职场文书
培训讲师岗位职责
2014/04/13 职场文书
处级干部考察材料
2014/12/24 职场文书
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB
教你nginx跳转配置的四种方式
2022/07/07 Servers