layui提交表单前，没有经过验证就提交了

原创 于 2022-12-22 11:16:32 发布 · 431 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#layui #javascript #前端
博主分享了在前端开发中遇到的问题，即如何在点击submit按钮时执行表单验证而不直接提交表单。通过将submit按钮改为普通button并添加click事件，实现了在AJAX请求后阻止表单默认跳转行为，确保表单验证在提交前执行。这一解决方案避免了页面刷新，提高了用户体验。

针对这个问题我刚是将submit按钮换成了普通button并加了click事件，虽然可行但是无法进行表单验证，于是查了官网
在这里插入图片描述
在这里插入图片描述
只需要在提交的时候ajax结束后加上return false
在这里插入图片描述
官网的解释是阻止表单跳转，反正加上之后，我的上面写的
在这里插入图片描述
表单验证部分能再提交前执行了

evennight
关注
layui踩坑记录之form表单下的button按钮默认自动提交
acoolgiser的博客
07-21 2965
因此，当我们在使用form的时候，如果没有添加标准的提交按钮，会自动默认把其他的普通按钮认为是提交按钮，因为button的type默认值为“submit”。其实就是使用form的时候，应该对应有一个提交按钮，配套使用。其他功能按钮相加多少就加多少，但是必须要有一个提交按钮。2.在不需要提交的场景使用form时尽量使用a标签按钮来代替button，比如筛选功能中的查询按钮；1.在form中使用button时添加type属性：button、submit、reset；layui的官网说的也是比较清楚的，通过。
LayUI+JavaScript生成动态表单及提交
-
08-29 9366
LayUI动态表单是在Vue+Element-UI动态表单生成及提交之前做的 LayUI效果如下： 引入需要的文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 引入JQuery --> <script type="t...
【layui采坑日记】ajax表单按钮提交不验证lay-verify="required" 无效解决办法
CaiXinXing的CSDN博客
05-08 6029
错误写法 <button class="layui-btn" data-type="saveArticle" type="button" lay-submit >立即提交</button> 正确写法 <button class="layui-btn" lay-filter="saveArticle" type="button" lay-submit >立即提交</button> 点击提交事件监听 form.on('submit(sa..
layui 表单去除校验
qq_38181746的博客
07-14 3673
layui 去除表单校验
layer.open 弹窗中jquery validate Form表单校验不生效
xiangyanghua_0911的博客
04-26 1573
开发中jsp页面表单提交validate 校验失效 原因：检查 layer.open success回调方法是否绑定表单校验方法，使用场景如下 function addFormData(){ var layerFlag = layer.open({ type: 2, //2（iframe层） title: '资产新增', //标题 area: ['95%', '86%'], //宽高 maxmin: false, shade: 0.4, //遮
使用layui表单通过ajax验证不通过form表单依然会提交的问题的解决
楞次定律
07-31 1万+
使用layui表单通过ajax验证不通过form表单依然会提交的问题的解决 功能是新增一个数据,需要验证该数据是否已经存在.通过ajax查询后台,返回验证结果. 使用layui form.verify 自定义验证规则.出现的问题是后台返回结果正常,但即使是验证不通过,表单依然会提交. 解决方法如下: HTML代码 表单其他元素使用layui预置验证规则,提交按钮使用自定义验证规则err...
先通过 layui 进行表单验证 ，验证通过后使用ajax提交表单
zhangbw's blog
08-20 3063
一、需求 使用 layui-verify 验证 表单选项 , 如果不满足则停留在此页面 ， 不进行表单提交 。 如果表单验证通过 ，通过ajax对表单进行相应操作。 二、效果图 三、如何使用 ？ 示例 ： 表单 <form class="layui-form" id="addBookForm"> <div class="layui-form-item"> <label class="layui-form-label">
# Layui 弹出弹出层提交表单
不积跬步，无以至千里；不积小流，无以成江海
09-25 4407
表格组件 table 是 Layui 中使用率极高的一个组件，它以表格的承载方式对数据进行渲染、重载、排序、统计、分页等等一系列交互操作，并提供了丰富的 API 用于扩展，基本涵盖了日常业务所涉及的大部分需求
Layui表单验证及提交
foxbamboo的博客
10-13 3330
查了很多人写的，真是试了各种方法，最后在这个帖子里看到的方法起了作用。 看代码： html页面 导入layui相关包后，关键代码是“ 保存”按钮中的 lay-filter=“saveArticle” lay-submit <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:mo="https://gitee.com/aun/Timo"> <head> <li
layui表单验证提交
qq_41669827的博客
05-19 4654
最近在做一个项目，需要用到表单提交，因为用的是layui框架，就在网上查了一下layui的表单验证。网上资料很多，不过蛮多都有点不够详细，需要花一些时间去验证琢磨。这里配上一篇文章来建议下我写的demo，不说了直接上代码新手学习，有不正确的地方大家请指正...
layui表单提交使用form.on(‘submit(sub)‘,function (){}) 使用ajax请求时回调不执行的原因及解决方法
weixin_40923658的博客
08-11 1597
layui表单提交使用form.on('submit(sub)',function (){}) 使用ajax请求时回调不执行的原因及解决方法
layui表单提交使用form.on('submit(sub)',function (){}) 使用ajax请求时回调不执行的原因及解决方法...
daxingsuo3996的博客
09-18 1053
ayui使用官方的表单模块form.on('submit(sub)',function (){}) 提交，使用ajax请求向后台请求一个执行结果，根据结果进行处理，出现回调无法执行，并且页面出现了刷新 之前也遇到过这个问题，直接使用将form标签修改成了div，通过jquery为提交按钮添加点击事件，而不用submit提交表单。 今天在为毕设添加修改密码的功能的时候，再次遇到了这个问...
layui使用中实现选中不提交以及跳过验证
乖乖康少
06-21 1820
ayui使用中的问题（选中不提交、跳过验证等），layui实现暂存功能
layui form表单下的button按钮会自动提交表单的问题以及解决方案
你用点心就行的博客
03-22 1万+
layui表单自动提交问题 最近使用layui的表单提交时，遇到了这个问题：在form内的按钮总是会自动提交。 而按钮放在form外面就不会出现这种问题，很让人头痛。 下面让我们来看看如何解决form内按钮自动提交问题的吧。 <form class="layui-form"> <label class="layui-form-label">银行卡号</label...
LayUI点击button自动提交表单
一只想成为斗战圣佛的小猴子
07-20 6920
今天在做一个页面的时候，分成两个左右两个部分，但都是写在一个表单里，并同时存在&lt;button&gt; 结果就造成了在点击button的时候，表单就自动提交了。 后来发现原因如下： .button的type属性值有三个分别为button、submit、reset。当我们在利用button标签写一个按钮且没有指定其type属性时，IE7以下版本（具体是IE7以下还是IE5以下给忘了）会默...
layui 主动验证表单规则
博客
03-08 1578
layui-v2.4.5 的form表单只能通过submit来验证规则，即lay-verify=“required” 的值。 将以下代码复制进form.js中即可 u.prototype.VerifyForm = function(z) { var e = null, a = f.config.verify, s = "layui-form-danger", c = t("#" + z), d = c.find("*[lay-verify]"); layui.eac
layui关于form表单submit提交时的校验
z1349757203的博客
07-04 6752
一、首先先看layui关于form表单的封装 二、x-admin的登录源码 三、因为x-admin的登录使用了required是必填项，只判断不为空。需要在登录时校验输入的账号密码不能小于六位数需要自己自定义添加判断。 目前只会使用正则去验证，如果是用length去验证不知道可不可行。 ...
layui form 自定义校验，不通过form还是会提交的问题
qq_35238963的博客
11-18 5118
layui一个不错的前端框架，上手较快不过，不过官网文档有些还是不全面，废话不多说，直接入题。 写了一个form但是要校验用户名的唯一性，所以使用了layui的自定义校验，代码如下 form.verify({ username:function(value){ var code; $.ajax({ type:"get", ...
解决layui表单中按钮自动提交的问题
热门推荐
Mirror_r的博客
07-09 1万+
layui表单中的按钮会自动提交，这是一个很麻烦的事情。 这几天项目中多次用到表单按钮，仔细研究了下，找到了解决办法： 1、如果不需要放在表单中的按钮，最好不要放在表单中，不在layui的form中的按钮就不会进行自动提交了； 2、放在表单中的按钮可以通过js中的回调函数里添加 return false制止。filter中的参数指的是按钮中的lay-filter属性中的值，这个可以自己随便设...
Layui表单提交问题
骜蛟的博客
01-30 4393
踩过的坑 1、Layui的form表单提交问题 ​ 在提交表单数据时，提交按钮为 submit 类型，以layui为js框架时，会重复提交表单数据。如何解觉这一问题？以下给出我认为便捷的三种方法： 设置button的type=button，否则默认submit，就会重复提交 在监听提交的form.on里加上return flase form.on("submit(formDemo)",function(data){ //do something return false; });
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值