Layui弹出层的yes/btin实现表单验证

2023-11-04

我们都知道layui的弹出层的btn属性生成的按钮,没办法实现弹出层内部的form验证成功后再执行相应操作。
我的方法是,在弹出层写一个隐藏按钮,一个隐藏的input和form.on方法,和自定义验证方法或者layui的验证方法,我使用的是layui的验证方法。
1、在弹出层内部建一个隐藏按钮

<button id="formVerify" class="layui-btn" lay-submit lay-filter="formVerify" style="display: none">添加</button>

2、在弹出层内部建需要验证的input

  <input type="text" id="orderNumber" name="orderNumber" lay-verify="required" placeholder="请输入订单号" autocomplete="off" class="layui-input">

注:lay-verify的required就是验证不能为空。内置方法。
3、在弹出层内部建一个隐藏的input

<input type="text" id="dis" name="dis" value="no" style="display:none" class="layui-input">

注:value是设置input的默认值
4、在弹出层内部建一个form.on的方法

 form.on('submit(formVerify)',function (data) {

            $("#dis").attr("value","yes");
           return false;
         });

注:这个是验证成功后才会执行下面的操作,
去修改隐藏iinput的默认值。
一定要renturn false,这样可以阻止表单提交。
5、在父层的open的yes里面写

 // 获取iframe层的body
 var body = layer.getChildFrame('body', index);//巧妙的地方在这里哦
   body.find('#formVerify').click();//点击提交验证按钮。

在这里插入图片描述
6、在父层获取隐藏iunput的默认值

body.contents().find("#dis").val()=="yes"

在这里插入图片描述
看到这里,相信大家已经知道了,我的想法。
如果隐藏input的值是yes,也就是说通过了表单验证,这样就可以进行ajax了
最后,如果想成功后,关闭弹出框,就可以在if的最后加:layer.close(index);

我的方法可能很lou,但也能实现想要的。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Layui弹出层的yes/btin实现表单验证 的相关文章

  • 了解设置 JQuery 变量

    了解设置 JQuery 变量 最近 我通过在 StackOverflow 上遇到的另一个问题寻找帮助 了解到如何设置 JQuery 变量 如下所示 您可以通过简单地调用变量来创建输入字段 并且锚变量似乎也定义了样式 var clicked
  • jquery.find() 可以只选择直接子项吗?

    我应该向 jQuery find 提供什么参数来选择元素子元素而不选择其他元素 我不能用 gt 引导选择器 而用 将选择所有后代 而不仅仅是直接子代 我知道 jQuery children 但这是一个库 因此用户能够提供自己的选择器 并且我
  • 我想检查 $('#td1').text() === "x" 是否?

    我想检查innerHtml是否有X或O 所以我不能再次添加任何其他东西 但它不起作用 添加检查代码后它就停止了 我在这里尝试做一个简单的XO游戏来更熟悉javascript和jquery 我也不确定是否可以用 jQuery 做到这一点
  • jQuery AJAX 调用 Java 方法

    使用 jQuery AJAX 我们可以调用特定的 JAVA 方法 例如从 Action 类 该 Java 方法返回的数据将用于填充一些 HTML 代码 请告诉我是否可以使用 jQuery 轻松完成此操作 就像在 DWR 中一样 此外 对于
  • 如何防止 Iframe 在与浏览器交互后弄乱浏览器的历史记录?

    因此 就我而言 我使用 Iframe 将 Grafana 附加到我的页面 这为我提供了漂亮且易于使用的图表 可以注意到 每次在图表上进行放大或缩小 使用鼠标单击 交互后 Grafana 的 Iframe 都会在我的 Angular 页面上触
  • Javascript正则表达式用于字母字符和空格? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我需要一个
  • 从未用 @flow 标记的导入文件中获取类型定义

    TL DR我怎么告诉flow从未声明的导入模块导入类型定义 flow 加长版 流接缝能够从不使用流语法的文件中派生类型 请参阅示例 示例文件 flow js if Math random lt 0 5 var y hello else va
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • 使用 KnockoutJs 映射插件进行递归模板化

    我正在尝试使用以下方法在树上进行递归模板化ko映射 插入 http knockoutjs com documentation plugins mapping html 但我无法渲染它 除非我定义separate每个级别的模板 在以下情况下
  • MVC 在布局代码之前执行视图代码并破坏我的脚本顺序

    我正在尝试将所有 javascript 包含内容移至页面底部 我正在将 MVC 与 Razor 一起使用 我编写了一个辅助方法来注册脚本 它按注册顺序保留脚本 并排除重复的内容 Html RegisterScript scripts som
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块?

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗
  • 如何在react-native中获取Text组件的onPress值

    我是一名新的 React Native 开发人员 我想使用 onPress 获取 Text 组件的值并将其传递给函数
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • 为什么在 Internet Explorer 中访问 localStorage 对象会引发错误?

    我正在解决一个客户端问题 Modernizr 意外地没有检测到对localStorageInternet Explorer 9 中的对象 我的页面正确使用 HTML 5 文档类型 并且开发人员工具报告该页面具有 IE9 的浏览器模式和 IE
  • 如何在类似控制台的环境中运行 JavaScript?

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示

随机推荐

  • Java设计模式:23种设计模式全面解析,墙都不扶就服你

    命令模式 将命令请求封装为一个对象 使得可以用不同的请求来进行参数化 迭代器模式 一种遍历访问聚合对象中各个元素的方法 不暴露该对象的内部结构 观察者模式 对象间的一对多的依赖关系 仲裁者模式 用一个中介对象来封装一系列的对象交互 备忘录模
  • 关于定时任务简单小脚本

    1 每4小时备份一次 etc 目录至 backup目录中 保存的文件名称格式为 etc yyyy mm dd HH tar xz crontab e 进入编辑模式 tar JcPf创建文档并保存为 xz格式 0 4 tar JcPf bac
  • 深入理解数据结构——图

    include
  • SAC(Soft Actor Critic)学习记录

    SAC Soft Actor Critic 学习记录 基本介绍 SAC Soft Actor Critic 算法在近年来受到了许多的关注 得到了不少深度强化学习研究者的好评 这篇文章主要包含的内容有SAC算法的理论分析和核心代码实现 与许多
  • ProGan,关键创新在于渐进式训练

    2018年 NVIDIA首次用ProGAN解决了这一挑战 研究人员一直无法生成高质量的大图像 例如1024 1024 ProGAN的关键创新在于渐进式训练 它首先用极低分辨率的图像 如4 4 训练生成器和鉴别器 然后每次增加一个更高分辨率的
  • Float比较大小

    目录 起因 结论 科学计数法 十进制转二进制 整数 基本 二进制科学计数法 总结 小数 基本 二进制科学计数法 总结 IEEE754标准存储 基本 起因 在阅读 阿里巴巴开发手册 时发现了一句话 强制 浮点数之间的等值判断 基本数据类型不能
  • Linux(查看服务cpu核数和内存)

    linux服务器中最重要的两个配置是CPU和内存 那么怎么开始查看CPU核数和内存 以及使用情况 是日常运维中使用最多的操作 查看linux服务器cpu最简单的命令是 cat proc cpuinfo 查看linux服务器cpu最简单的命令
  • TCP常见面试题

    1 画出TCP的报头 2 说一下TCP的三次握手过程 3 为什么TCP握手需要三次 TCP是可靠的传输控制协议 三次握手能保证数据可靠传输又能提高传输效率 如果TCP的握手是两次 lt 1 gt 如果client发给server的SYN报文
  • Spring 事务事件控制 解决业务异步操作解耦 TransactionSynchronizationManager Transaction

    场景 在业务中 经常需要在执行数据库操作后 事务提交完成 发送消息或事件来异步调用其他组件执行相应的业务操作 比如 用户注册成功后 发送激活码或激活邮件 如果用户保存后就执行异步操作发送激活码或激活邮件 但是前面用户保存后发生异常 数据库进
  • kmeans聚类簇个数选择

    借助sklearn库实现kmeans聚类和轮廓系数计算 from sklearn cluster import KMeans from sklearn metrics import silhouette score K range 2 20
  • 使用Python与Stm32进行通信

    方法 利用python的serial函数库与STM32进行通信 将Stm32用USB连接到电脑 打开设备管理器查看端口 端口为COM3 写下Python程序 import serial 连接串口 serial serial Serial C
  • python Typing模块-类型注解

    写在篇前 typing 是python3 5中开始新增的专用于类型注解 type hints 的模块 为python程序提供静态类型检查 如下面的greeting函数规定了参数name的类型是str 返回值的类型也是str def gree
  • STL几种常见类型的比较

    这里主要是想要比较几种容器的性能 至于他们的接口不在考虑范围 Vector 相当于一个数组 在内存中分配一块连续的内存空间进行存储 支持不指定vector大小的存储 STL内部实现时 首先分配一个非常大的内存空间预备进行存储 即capaci
  • Mac pycharm 导入pyspark

    转载于 点击打开链接 1 前提 已经安装了pycharm 下载了spark 官网下载 我下的是spark 2 1 1 bin hadoop2 7 tgz 解压缩后为文件夹spark 2 1 1 bin hadoop2 7 我将文件放在了 A
  • C#项目实战|人脸识别考勤

    人脸识别考勤是一种基于人脸识别技术的智能化考勤系统 可以实现快速准确的考勤记录 提高考勤管理的效率和准确性 本文将介绍如何使用C 语言开发人脸识别考勤系统 一 项目概述 本项目使用C 语言 采用人脸识别技术和数据库技术 实现了一个基于人脸识
  • robots.txt 泄漏敏感信息

    robots txt 泄漏敏感信息 漏洞描述 搜索引擎可以通过robots文件可以获知哪些页面可以爬取 哪些页面不可以 爬取 Robots协议是网站国际互联网界通行的道德规范 其目的是保护网站数据和敏感信 息 确保用户个人信息和隐私不被侵犯
  • UVa 120 Stacks of Flapjacks

    Background Stacks and Queues are often considered the bread and butter of data structures and find use in architecture p
  • linux命令之tar -C命令的含义

    C代表change目录的意思 本例中指定解压文件到 opt cloudera manager这个目录下
  • 华为DevEco Device Tool的一个小bug及其解决方法

    今天 尝试烧录hi3516镜像遇到如下错误 正在执行任务 home vboxuser Huawei DevEco Device Tool core deveco venv bin hos run target upload project
  • Layui弹出层的yes/btin实现表单验证

    我们都知道layui的弹出层的btn属性生成的按钮 没办法实现弹出层内部的form验证成功后再执行相应操作 我的方法是 在弹出层写一个隐藏按钮 一个隐藏的input和form on方法 和自定义验证方法或者layui的验证方法 我使用的是l