开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

即使验证函数返回false，表单仍在提交

基础概念

在前端开发中，表单提交通常涉及以下几个关键点：

表单验证：在表单提交之前，通常需要对用户输入的数据进行验证，以确保数据的合法性和完整性。
事件处理：表单提交事件（如submit事件）需要被捕获和处理，以便在提交前执行验证逻辑。
阻止默认行为：如果验证失败，需要阻止表单的默认提交行为。

相关优势

数据一致性：通过验证确保提交的数据符合预期格式和内容，减少服务器端的数据清洗工作。
用户体验：及时反馈用户输入错误，减少无效提交，提升用户体验。
安全性：防止恶意数据提交，保护系统安全。

类型

客户端验证：在浏览器端进行验证，速度快，减轻服务器负担。
服务器端验证：在服务器端进行验证，更为安全，但会增加服务器负担。

应用场景

注册/登录表单：验证用户名、密码等字段。
支付表单：验证信用卡信息、金额等。
搜索表单：验证搜索关键词的合法性。

问题原因及解决方法

问题原因

即使验证函数返回false，表单仍在提交，通常是因为没有正确阻止表单的默认提交行为。

解决方法

在表单的submit事件处理函数中，使用event.preventDefault()方法来阻止表单的默认提交行为。

以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation Example</title>
</head>
<body>
    <form id="myForm">
        <input type="text" id="username" placeholder="Username">
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            // 获取输入值
            const username = document.getElementById('username').value;

            // 验证逻辑
            if (username.length < 3) {
                alert('Username must be at least 3 characters long.');
                event.preventDefault(); // 阻止表单提交
                return false;
            }
        });
    </script>
</body>
</html>

参考链接

通过上述方法，可以有效防止表单在验证失败时仍然提交的问题。

相关搜索:Form onsubmit返回false，但仍在继续提交表单 CustomValidator设置为false，但仍在提交表单即使我在处理程序中返回false，Angular仍然提交表单即使表单验证失败，也会提交表单即使验证失败,表单也会提交表单即使未通过JavaScript验证也会提交 JS / JSX函数总是返回true，即使它是false 即使函数返回false，ONCLientClick()也会回发 PHP函数即使成功执行也会返回false Django表单没有返回验证错误，即使它应该返回？在提交确认返回false时如何防止表单动作？电子邮件表单提交，即使在验证失败之后 javascript提交表单，然后阻塞并使用swal从非异步函数返回false PHP isset()函数即使单击按钮也会返回false 表单提交按钮在onsubmit返回false后不起作用我的递归函数(javascript)总是返回false，即使它是true 在函数返回true之前不要提交表单提交表单后不传递参数的Javascript函数(表单验证)表单验证函数不会在提交时运行在使用ngNativeValidate提交表单之前调用验证函数

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

laravel使用ajax 表单提交后台验证如何返回错误信息？？？

name: { required: "角色名称不能为空", } }, onKeyup:false..., success:"valid", //验证通过后处理 submitHandler:function (form) { let

2K3 0

validation怎么用_什么是确认validation

PS：如果希望只在表单提交时验证，可以设置为空。或者设置参数 binded:false binded true 是否绑定即时验证 scroll true 屏幕自动滚动到第一个验证不通过的位置。...onFieldFailure false 控件验证失败时的回调函数 function(field){} onSuccess false 在表单验证结果为通过时的回调函数 onFailure false...在表单验证结果为失败时的回调函数 PS：onSuccess 和 onFailure 请参考 [Demo] onValidationComplete false 表单提交验证完成时的回调函数 [Demo...] function(form, valid){}，参数： form：表单元素 valid：验证结果（ture or false） PS：使用此方法后，表单即使验证通过也不会进行提交，交给定义的回调函数进行操作...noop 表单提交验证通过后，Ajax 提交之前的回调函数 [Demo] function(form, options){} ajaxValidCache {} isError false InvalidFields

2.3K1 0

用jquery实现表单验证_jquery验证插件

PS：如果希望只在表单提交时验证，可以设置为空。...{} onFieldFailure false 控件验证失败时的回调函数 function(field){} onSuccess false 在表单验证结果为通过时的回调函数 onFailure...false 在表单验证结果为失败时的回调函数 PS：onSuccess 和 onFailure 请参考 [Demo] onValidationComplete false 表单提交验证完成时的回调函数...[Demo] function(form, valid){}，参数： form：表单元素 valid：验证结果（ture or false） PS：使用此方法后，表单即使验证通过也不会进行提交，交给定义的回调函数进行操作...$.noop 表单提交验证通过后，Ajax 提交之前的回调函数 [Demo] function(form, options){} ajaxValidCache {} isError

4.3K4 0

HTML 表单和约束验证的完整指南

这称为约束验证。客户端与服务器端验证在语言早期编写的大多数 JavaScript 代码处理客户端表单验证。即使在今天，开发人员仍花费大量时间编写函数来检查字段值。这在现代浏览器中仍然必要吗？...readonly 该字段不可编辑，但仍将被验证并提交 required 该字段是必需的 size 控件的大小（通常在 CSS 中被覆盖） spellcheck 设置true或false拼写检查 src...同样，无效表单可能会突出显示无效字段。现场验证各个字段具有以下约束验证属性： willValidate:true如果元素是约束验证的候选元素，则返回。...可以设置可选的第二个参数： true 在用户与其交互时验证每个字段 false （默认）在第一次提交后验证所有字段（在此之后进行字段级验证） // validate contact form const...方法定义了自定义验证函数。

8.3K4 0

通过匿名函数和验证规则类自定义 Laravel 字段验证规则

我们可以通过匿名函数和验证规则类两种方式来自定义验证规则。...，原来通过 | 分隔多个规则的组合规则字符串已经实现不了了，需要将其改成数组的方式，然后将自定义规则以匿名函数的方式添加到数组最后，如上面的代码所示，该匿名函数第一个参数是字段名，第二个参数是字段值，第三个参数是校验失败用于返回的函数名...这样，我们在提交表单时输入包含敏感词的数据时，就会校验出来了： ?...如果你使用的是 Validator::make 进行请求字段验证的话，实现方式完全一样，不再赘述，即使是在表单请求类 SubmitFormRequest 中，也是一样的，把代码迁移过去就好了： public...再次提交表单，就可以看到通过规则类自定义的验证规则也生效了： ? 很显然，匿名函数虽然方便，但是解决不了代码复用的问题，通过自定义验证规则类则可以很好的解决，一次定义，多处复用。

2.9K2 0

深入讲解 ASP+ 验证

某个独立的字段更改时，将重新评估验证条件，根据需要使验证器可见或不可见。当用户尝试提交表单时，将重新评估所有验证器。如果这些验证器全部有效，表单将提交给服务器。...如果存在一处或多处错误，则会出现下述情况：提交被取消。表单并不提交给服务器。所有无效的验证器均可见。...绕过客户端验证您经常需要执行的一项任务是在页面上添加“取消”按钮或导航按钮。在这种情况下，即使页面上有错误，您可能也希望使用该按钮提交页面。...因为客户端按钮 "onclick" 事件在表单的 "onsubmit" 事件之前发生，因此可能会避免提交检查，并绕过验证。...;"); 解决该问题的另一种方法是：对“取消”按钮进行一定的设置，使其在返回时不会触发客户端脚本中的提交事件。

5.3K1 0

jQuery插件 -- Form表单插件jquery.form.js

，轻易地将表单的提交方式升级为Ajax提交方式 ajaxForm() 和 ajaxSubmit() 都能接受0个或1个参数，当为单个参数时，该参数既可以是一个回调函数，也可以是一个options对象，上面的例子就是回调函数...false，表单都会提交,在这里可以对表单元素进行验证 21 }; 22 23 function showResponse(responseText, statusText){ 24...; //阻止表单默认提交 37 }); 表单提交之前进行验证： beforeSubmit会在表单提交前被调用，如果beforeSubmit返回false，则会阻止表单提交 1 beforeSubmit...: validate 2 function validate(formData, jqForm, options) { //在这里对表单进行验证，如果不符合规则，将返回false来阻止表单提交，直到符合规则为止...，它能找出表单中的元素的值，返回一个集合。

13.5K5 0

web前端之锋利的jQuery八：jQuery插件的使用（表单验证、表单提交）

1.jQuery表单验证插件－Validation：最常使用JavaScript的场合就是表单的验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件－Validation...自定义验证规则：可以很方便地自定义验证规则简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能实时验证：可以通过keyup和blur事件触发验证，而不仅仅在表单提交的时候验证...show(); }); return false;//阻止表单默认提交 }); ajaxForm()和ajaxSubmit()的参数 ajaxForm()和ajaxSubmit()都能接受...; }); 在options对象里，指定两个回调函数，即beforeSubmit:showRequest和success:showResponse,他们分别会在表单提交前和表单提交后被调用。...这个回调函数中只要不返回false，表单豆浆杯允许提交；如果返回false，则会阻止表单提交。

6.6K5 0

form表单添加验证码并当验证通过后再提交表单

意思就是，form表单中添加一个验证码验证，然后当点击提交时先核验验证码是否正确，如果正确再提交数据，否则不提交。...validateCaptcha()事件，并添加一个验证码展示区域 id为generated-captcha，点击后获取验证码绑定点击事件generateCaptcha() 验证码生成函数 function..."generated-captcha").innerHTML = captcha; } 验证码验证函数 function validateCaptcha() { var input =...; } } 当输入的验证码和随机生成的验证码相同返回true，否则返回false 表单提交事件 // 使用事件监听器来捕获表单提交事件 var form = document.querySelector...，并且检测如果验证返回true则手动提交表单，否则返回错误信息。

1.5K1 0

文档和元素的几何滚动

还有一个onreset事件处理程序来检测表单的重置。表单提交前将会调用onsubmit程序，如果回调函数的返回值为false则会取消表单的提交动作。这是js程序一个用来检查用户的输入错误。...表单每发生一个改变的时候，都会触发一个事件，从而可以通过事件调用回调函数。一般来说，当按钮表单元素激活（甚至当通过键盘而不是鼠标）都会触发click事件。...如果返回false将会取消提交。直接调用submit()方法的时候，不会验证该过程，将会直接提交给服务器，所以服务器端也要做一遍验证。正话：window对象的submit事件的一个句柄。...使用场景：对用户表单进行输入的验证具体的后面有事件，继续写。其过程如下先触发onsubmit事件 → 接着调用submit()方法完成提交。...false，则不会重置同样，如果使用表单的onreset()方法也不会触发该事件，将会直接进行重置。

5.2K0 0

form表单提交的几种方式

为正确的函数名，以执行回调函数。 text：返回纯文本字符串。...如果返回false阻止提交 }, success:function (data){ alert("12354") alert(data) }...novalidate 作用：如果使用该属性，则提交表单时不进行验证。使用方式： novalidate="novalidate" target 作用：规定在何处打开 action URL。...如果设置，则规定在提交表单时不对元素进行验证。 formnovalidate 属性覆盖元素的 novalidate 属性。...对于通常的表单应用来说，这样多一两个参数并没有问题，因为我们在接收端中都是按照指定的名称来处理参数，所以即使多了两个参数也不会有任何问题。

6.4K2 0

JavaScript 表单验证

JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。...表单数据经常需要使用 JavaScript 来验证其正确性：验证表单数据是否为空？验证输入是否是一个正确的email地址？验证日期是否输入正确？验证表单输入内容是否为数字型？...---- 必填（或必选）项目下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。...假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）： function validateForm() { var x=document.forms...="post"> 姓: E-mail 验证下面的函数检查输入的数据是否符合电子邮件地址的基本语法

3.1K3 0

优雅解决按钮”重复点击“问题

func作为传递给ignoreMultiClick进行装饰，会返回一个新的函数，使用该函数作为点击的回调事件即可。...自动解锁：可以使原监听函数func返回一个promise，在该promise决议后自动执行解锁操作。...当然返回promise并不是必须的，有时候我们在发请求前会进行一些验证，验证没通过则直接return，此时装饰器函数也能正常处理，因为使用Promise.resolve包裹了一下promise：Promise.resolve...).then( // 表单提交成功 ).catch(error => { // 表单提交出错 console.log(error) }) }) button.addEventListener...checkForm()) return done() // 表单验证不通过解锁 axios.post('urlxxx', postParams).then( // 表单提交成功 ).catch

2.4K4 0

submit方法与onsubmit事件

如何阻止表单的提交经常我们的提交表单前都会用js对表单内容作验证，如果有问题，则不希望提单表单。那么，如果阻止表单提交呢？取决于你用什么方式给表单加入onsubmit事件。...check(); } 用这种方式绑定onsubmit事件，表单能否提交取决于onsubmit函数的返回值。...false时，表单不会提交。...，但FF及chrome下表单正常提交了......可见，listener是没有返回值的（写了也不会认），因此我们的check函数的返回值是不起作用的。

2.6K2 0

【Java 进阶篇】JavaScript 表单验证详解

JavaScript 表单验证是网页开发中不可或缺的一部分。它允许您确保用户在提交表单数据之前输入了有效的信息。...用户可以在这个表单中输入信息并点击 “提交” 按钮。 JavaScript 表单验证的基础为了进行表单验证，我们需要使用 JavaScript 来检查用户输入的数据。...如果任何一个字段为空，它将显示一个警告框并返回 false，防止表单提交。否则，它将返回 true，允许表单提交。接下来，我们需要将这个验证函数与表单关联起来。...-- 表单字段 --> 现在，当用户尝试提交表单时，validateForm 函数将被调用，并根据验证的结果来决定是否允许提交。...现在，让我们创建 JavaScript 表单验证函数来验证这个注册表单。

2922 0

form实现表单提交的各种方法(表单提交源码)

javacript函数来提交表单，方法就非常多非常灵活了，比如可以把它加入到任意一个标签的onclick事件中： ...当不写type属性时，其type的默认值是submit，点击的话也会直接提交数据使用form的onsubmit()方法对表单数据进行验证后再提交 <form id="form1" action="...('user').value; var psw= document.getElementById('psd').value; if (...) { //如果<em>验证</em>不通过 return <em>false</em>...return<em>返回</em>值，如果值为<em>false</em>则不进行<em>提交</em>，如果为true则<em>提交</em>。...return <em>false</em>; } document.getElementById("form1").submit(); } 使用ajax对数据进行验证后再提交

5.3K3 0

React Form组件杂谈

二、Form组件功能一般来说，Form组件的功能包括以下几点：表单布局表单字段封装表单验证&错误提示表单提交下面将对每个部分的实现方式做详细介绍。..._value; }; } 四、表单验证&错误提示表单验证是一个重头戏，只有验证通过了才能提交表单。验证的时机也有多种，如字段变更时、鼠标移出时和表单提交时。...，ZentForm是会对表单对所有字段进行验证，可以通过指定relatedFields来告诉表单哪些字段需要同步进行验证。...五、表单提交表单提交时，一般会经历如下几个步骤表单验证表单提交提交成功处理提交失败处理 ZentForm通过handleSubmit高阶函数定义了上述几个步骤，只需要传入表单提交的逻辑即可：...太多的情况下对整个表单字段进行了校验，比较合理的情况应该是某个字段修改的时候只校验本身，在表单提交时再校验所有的字段。表单提交操作略显繁琐，还需要调用一次handleSubmit，不够优雅。

8851 0

JavaScript(十三)

API ---- 为了在将表单提交到服务器之前验证数据，HTML5 新增了一些功能。...所有表单字段都有个方法，如果字段的值有效，这个方法返回 true，否则返回 false。...如果所有表单字段都有效，这个方法返回 true，即使有一个字段无效，这个方法也会返回 false。...可以告诉表单不进行验证。...--这里插入表单元素--> 为了指定点击某个提交按钮不必验证表单，可以在相应的按钮上添加 formnovalidate 属性: <form method="post" action

3.3K2 0

Jquery 常见案例

，这样可以阻止正常的浏览器表单提交和页面转向 return false; }); formSerialize 将表单序列化成查询串。...这个可以用在表单提交前的预处理，或表单校验。如果'beforeSubmit'指定的函数返回false，则表单不会被提交。...： null success 当表单提交后执行的函数。...如果'success' 回调函数被指定，当server端返回对表单提交的响应后，这个方法就会被执行。...缺省值： false resetForm 布尔值，指示表单提交成功后是否需要重置。缺省值： null clearForm 布尔值，指示表单提交成功后是否需要清空。

6.7K1 0

Django学习笔记之Ajax与文件上传

即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。...服务器返回true或false，返回true表示这个用户名已经被注册过，返回false表示没有注册过。客户端得到服务器返回的结果后，确定是否在用户名文本框后显示“用户名已被注册”的错误信息！...2 基于Ajax进行登录验证用户在表单输入用户名与密码，通过Ajax提交给服务器，服务器验证后返回响应信息，客户端通过响应信息确定是否登录成功，成功，则跳转到首页，否则，在页面上显示相应的错误信息。...浏览器的原生表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。...由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

1.6K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭