解决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获取form表单值的代码
Jul 17 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
React组件的三种写法总结
Jan 12 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 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 获取本地IP代码
2013/06/23 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
javascript 写类方式之三
2009/07/05 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
详细介绍Python语言中的按位运算符
2013/11/26 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
Django实现发送邮件功能
2019/07/18 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
社会实践心得体会
2014/01/03 职场文书
大学生村官事迹材料
2014/01/21 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
科技活动周标语
2014/10/08 职场文书
迁户口计划生育证明
2014/10/19 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书