阻止表单submit提交（在提交之前做验证及判断）

最新推荐文章于 2023-08-26 14:44:49 发布
最新推荐文章于 2023-08-26 14:44:49 发布
阅读量1.3w 收藏 20
点赞数 4
分类专栏： 程序人生
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40933787/article/details/80110207
版权

说明：在工作中遇到表单提交之前，需要验证用户输入的是否为空，之前使用ajax做提交，在js里面直接做判断，如果用户输入为空则弹出提示框（起初默认是隐藏的，非alert弹出框），让用户重新输入，当输入框获取焦点的时候，弹出的提示框隐藏。

1.原理：

onsubmit 函数名（）

在表单的标签里面加入 onsubmit标签

<form  method="post"onsubmit="return checkip()">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<form  method="post"onsubmit="return checkip()">
            <label class='lab' for="exampleInputName2">start_time</label>
            <input type="datetime-local" class="form-control startTimewater" id="exampleInputName2" name="start_time">

            <label  class='lab' for="exampleInputEmail2">end_time</label>
            <input type="datetime-local" class="form-control endTimewater" id="exampleInputEmail2" name="end_time">
            <button type="submit" class="btn btn-info btn-search" id="submit">提交</button> 
    </form>

<script src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
 function checkip() {
        var start_time_water = $('#exampleInputName2').val()
        var end_time_water = $('#exampleInputEmail2').val()
        if (start_time_water=="" || end_time_water==""){
            alert('请输入正确的格式，时间不能为空！')
            return false;
        }
        else{
            return true;   
        }
    }

</script>
</html>

return false ：表单不提交；return true；表单提交。在return false 做操作，判断，条件满足则提交，条件不满足，不提交。

在用户提交空的时候，会弹出提示框。

Tony_king_kong
关注
  • 4
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
submit表单提交，onsubmit验证拦截
10-30
submit表单提交，onsubmit验证拦截 免去了用button按钮click点击事件ajax请求
jQuery中验证表单提交方式及序列化表单内容的实现
12-02
在这个例子中，`onSubmit`回调函数用于验证表单，如果验证失败，通过返回`false`来阻止表单的提交。`validate`方法用于检查必填项是否已填写。如果表单验证通过，`success`回调函数处理服务器返回的数据。 其次，...
Submit禁止提交的两种方式：preventDefault
胖大xian
01-26 4108
Submit禁止提交的两种方式 这是一个很小的错误，但是花了5h去找错误，这里分享给大家。 首先，当我们想提交一个表单的时候，他默认的方式是将表单内所有的东西变成一个byte放在request的body里，给后端去使用，而当我们需要使用json数据的时候这个功能就有些鸡肋了，后端会一直报json的错误。此时我们就需要禁止submit的默认提交方式，让程序使用我们自己的函数去提交。默认的方法就是使用preventDefault。 问题就出现在这里：对谁去preventDefault。 先写一个简单的html
form表单的多种提交方式及提交前验证
热门推荐
qq_42128262的博客
06-21 2万+
以下是本人总结处来的一些form的提交方式，网上还有别的提交方式，这里我总结了大小分为7类，其实就是三类的提交方式，若有哪里不对的，还请评论指出来，大家一起学习学习 1、无任何验证提交（最普通的提交） 该方式不提供任何的验证方式，当我们点击提交时（提交的前提一定是 <input> 的type="submit"或者加粗样式<button>的type=“submit”） for...
submit禁止提交的几种方式
u011431550的专栏
09-11 1万+
阻止表单提交。。。
在表单提交前进行数据验证
哈
04-10 682
点击表单中的提交按钮，默认就会提交表单，如果要在表单提交之前做一些校验，那么就可以用jQuery的submit方法。也就是jQuery的submit的方法执行顺序，在表单的提交之前。：return false不往下执行请求form的action，return true继续往下执行请求form的action。
在表单提交前进行验证的几种方式整理
09-05
正则表达式可以在`test()`方法中使用，如果输入不符合规则，返回`false`并阻止表单提交。 4. **HTML5内置验证**： HTML5引入了内置的表单验证功能，如`required`属性、`pattern`属性等。`required`属性可以指定...
onsubmit阻止form表单提交与onclick的相关操作
09-05
当在表单的`onsubmit`事件处理器中设置`return false`时，可以阻止表单的默认提交行为。这是因为JavaScript函数中的`return`语句不仅返回一个值，还具有控制流程的作用。当`return false`被执行时，它会立即停止...
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
10-19
在网页开发中，表单验证是一项重要的任务，它确保用户输入的数据符合预期，避免无效或错误的数据被提交至服务器。本文将重点讲解如何使用JQuery进行表单提交前的验证，特别是针对单选框是否选中的检查，以及在执行...
js判断所有表单项不为空则提交表单的实现方法
10-21
如果发现有空值，它会弹出警告提示，并将焦点设在该空项上，阻止表单的提交。只有当所有表单项都有值时，表单才会被提交。 ```html ()"> 用户名:<input type="text" name="username"><br> 性别:...
阻止 form 表单的默认提交
最新发布
qq_40147756的博客
08-26 1343
表单提交的3种方式，以及如何阻止表单的提交行为。
关于如何在submit按钮提交前设置异步方法控制是否提交
风起云涌
05-09 1141
       需求：最近有一个需求，就是在文件下载前，先弹出提示框，提示即将下载文件的大小等信息。用户根据提示信息的实际需要，选择确定或者取消。        问题：下载按钮使用submit类型，点击后，没有办法可以捕捉submit按钮在提交之前的事件。也就是说，直接处理，没办法通过异步查询返回提示内容给用户选择。        解决：通过在页面上隐藏原submit下载按钮，重新增加一个bu...
阻止form表单submit提交
东天里的冬天
06-13 1万+
近日在做项目的时候部分需要用到表单验证，原本想用插件进行验证的，结果发现只需要验证一个地方，就想自己用js写一下，过程中发现一个问题，在验证错误的时候需要点击submit时无法提交，这边就这个问题进行说明一下。 功能说明： 1.为空时，提交的时候会进行提示且无法提交。 2.名字长度不符时，失去焦点时会提示。 3.会检测后台数据库，看相册命名是否重复。 4.以上提示在提交表单时如果不符
js实现表单验证
weixin_30551947的博客
05-26 256
CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:0;margin:0;} #header,#main{ width:650px; margin:0 auto; } .bg{ background-image:ur...
form 表单提交前验证 onsubmit 原生javascript
Guoye的专栏
04-22 2255
form 表单提交前验证 onsubmit 使用form表单的onsubmit方法，在提交表单之前，对表单或者网页中的数据进行检验。 onsubmit指定的方法返回true，则提交数据；返回false不提交数据。 在不使用JQuery的情况下（js原生），是提交表单前拦截的较好方法。 js验证form表单，示例代码： <!DOCTYPE html> <html> <...
表单提交验证的三种方式
滴水石穿
08-26 3497
第一种： 复制代码 代码如下: <script type="text/javascript"> function check(form) { if(form.userId.value=='') { alert("请输入用户帐号!"); form.userId.focus()...
如何阻止表单的自动提交 - onclick - onsubmit - return true / false；
Muxiu
05-10 1140
目录表单的默认提交理解 onclick 和 onsubmit 参数的先后顺序补充： 表单的默认提交 一般，后台程序员与表单打交道的时间是最多的 最近学习Html 表单的提交验证，没想到运行时，都会给我自动提交，这真是难为我了，查了一下，原来是onclick/onsubmit方法的机制问题，我们看似正常传递了函数，用来验证提交是否有问题，如账号或密码是空的验证操作，就不提交表单了。 具体看一下html代码： <!-- 表单配置 --> <form action="/index/" met
JS实现表单内容验证、阻止表单提交（onsubmit）
sinat_36713319的博客
06-28 9887
onsubmit属性只在 <form> 表单中使用。 onsubmit事件是当表单提交时进行相关JS操作的一个事件。 onsubmit事件会在表单中的确认按钮被点击时发生。当该事件触发的函数中返回false时，表单就不会被提交。<!DOCTYPE html> <html> <head> <title>onSubmit</title> <script type="text/java
阻止表单提交的两种方式
qq_41369312的博客
01-31 1500
在前端想做表单验证，但是一点击提交，表单准能提交出去，加了return false也没用。所以在网上搜了下面的第二个方法，才阻止了表单的提交。 1.return false 这种方式大家应该都熟悉，我就不在说了。 2.使用preventDefault() 在标准浏览器中，阻止浏览器默认行为使用event.preventDefault()。示例代码： $(".submit").on
写一个js函数在提交表单前判断用户名,密码,确认密码
06-02
好的，以下是一个简单的 JavaScript 函数，可以用于在提交表单前判断用户名、密码和确认密码是否符合要求： ```javascript function validateForm() { // 获取表单中的用户名、密码和确认密码输入框 var username = document.forms["myForm"]["username"].value; var password = document.forms["myForm"]["password"].value; var confirmPassword = document.forms["myForm"]["confirmPassword"].value; // 判断用户名是否为空 if (username == "") { alert("用户名不能为空"); return false; } // 判断密码是否为空 if (password == "") { alert("密码不能为空"); return false; } // 判断确认密码是否为空 if (confirmPassword == "") { alert("确认密码不能为空"); return false; } // 判断密码和确认密码是否一致 if (password != confirmPassword) { alert("密码和确认密码不一致"); return false; } // 如果所有条件都满足，则返回 true，提交表单 return true; } ``` 你可以将这个函数绑定到表单的 `onsubmit` 事件上，例如： ```html <form name="myForm" onsubmit="return validateForm()"> <!-- 表单输入框等元素 --> <input type="submit" value="提交"> </form> ``` 这样，当用户点击提交按钮时，会先调用 `validateForm()` 函数进行验证，如果验证通过则提交表单，否则阻止表单提交并显示相应的提示信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值