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

最新推荐文章于 2025-04-09 09:27:00 发布

泓影 - 玄冥

最新推荐文章于 2025-04-09 09:27:00 发布

阅读量4.1k

点赞数 2

文章标签： layui javascript

版权

本文介绍了如何在layui弹出层中实现表单验证成功后再执行特定操作。通过创建隐藏按钮和input，配合layui的验证方法，当验证通过后更改隐藏input的值。在父层监听该值变化，从而判断是否执行后续操作，如AJAX请求。这种方法虽简单但实用，能有效控制弹出层表单的提交流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们都知道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，但也能实现想要的。