layui弹出层form表单自带的验证不执行

其实没有执行那个form的那个submit方法没有执行

废话少说放代码

这是官方的弹出层

官方form表单例子

<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="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">验证必填项</label><div class="layui-input-block"><input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">验证手机</label><div class="layui-input-inline"><input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">验证邮箱</label><div class="layui-input-inline"><input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input"></div></div></div>
</form>

js弹出层的例子

layer.open({type: 1,title: false,closeBtn: 0,btn: ['提交', '取消'],shadeClose: true,skin: 'yourclass',content: '#layui-form'
});

接下来如何让弹出层执行form验证规则

因为我们点击弹出层，就要执行弹出层的回调方法，
在回调 success 方法中把弹出层的 btn 添加submit。让其点击按钮时执行form提交功能

layer.open({type: 1,title: false,closeBtn: 0,btn: ['提交', '取消'],shadeClose: true,skin: 'yourclass',content: '#layui-form'，success: function(layero, index){// 添加form标识layero.addClass('layui-form');// 将保存按钮改变成提交按钮layero.find('.layui-layer-btn0').attr({'lay-filter': '事件名','lay-submit': ''});form.render();}});

现在弹出层就有了可以验证表单的功能了

但是这个提交并不完整依旧有问题，只是部分验证有用，表单验证没有验证数据直接提交到后端去，接下如何如何优化呢？

找到btn 确认按钮的回调方法把form方法直接写在 yse 的回调方法中去

layer.open({type: 1,title: false,closeBtn: 0,btn: ['提交', '取消'],shadeClose: true,skin: 'yourclass',content: '#layui-form'，success: function(layero, index){// 添加form标识layero.addClass('layui-form');// 将保存按钮改变成提交按钮layero.find('.layui-layer-btn0').attr({'lay-filter': '事件名','lay-submit': ''});form.render();}，yes: function(index, layero){form.on('submit(事件名)', function(data){}}});```这样才算完美的

layui弹出层的表单验证相关推荐

layui弹出层提交表单！
本文章使用layui框架,提交表单,如果使用其他的框架请右上角! 首先设置弹出层如下图: layer.open({ type : 2, title : "信息編輯", area : ...
html5弹出层表单,layer弹出层实现表单提交
js $("#info_withdraw").on('click', function () { //iframe层 layer.open({ type: 2, title: '申 ...
layui弹出层在登录中的应用
layui弹出层在登录中的应用首先写好登录界面,然后在主界面登录按钮上添加layui弹出层. 登录界面.注册界面二合一(含表单验证) <!DOCTYPE html> <html l ...
layui弹出层之应用实例讲解
从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...
layui弹出层使用方法总结
layui的模态窗口很强大,但是使用的时候要声明很多东西,并且对于窗口之间的参数传递也没有做具体的说明,所以基于layui弹出层的api进行了一些简单的封装,使用起来更加顺手,先上代码 functio ...
模拟layui弹出层
以前觉得自己手写一个类似layui的弹出层是挺遥远的事,因为完全没有头绪,即便在layui官网知道layui使用的都是C3动画之前试过控制width:0;height:0来做动画,结果惨不忍睹,直到 ...
layui弹出层：使用icon图标小结
文章目录 layui弹出层:icon图标小结表格示下: 调用代码 · 效果图 · 示下: layui弹出层:icon图标小结 layui的弹框插件layer中,有很多不同场景需要的弹框icon图标, ...
layui弹出层：皮肤扩展（文档解读）
layui弹出层:皮肤扩展(文档解读) layui弹出层:样式自定义官方文档:https://layer.layui.com/ 皮肤扩展 · 官方教程: 官方文档:https://layer.lay ...
layui弹出层：倒计时后自动关闭（含代码、案例）
layui弹出层:倒计时后自动关闭(含代码.案例) 问题描述: 如何设定倒计时? 如何在自动倒计时结束后关闭弹框: 如何自定义"按钮文字"文案: 如何在关闭后,执行函数事件: 如何 ...

layui弹出层的表单验证

这里写自定义目录标题

layui弹出层form表单自带的验证不执行

废话少说放代码

接下来如何让弹出层执行form验证规则

但是这个提交并不完整依旧有问题，只是部分验证有用，表单验证没有验证数据直接提交到后端去，接下如何如何优化呢？

layui弹出层的表单验证相关推荐

最新文章

热门文章