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