gpt4 book ai didi

javascript - onsubmit 返回 false,但提交仍然执行

转载 作者:行者123 更新时间:2023-12-03 07:01:23 28 4
gpt4 key购买 nike

我又迷路了。我有一个包含三个 JS 函数的注册表单,当我的 html 表单中的 onchange 调用时,它们会生成所需的输出。因此,当用户填写表单时,他们会发出 BS 警报。这是三个函数:

检查密码长度:

function checkPassword() {
var x = document.registerForm;
var wachtwoord = x.wachtwoord.value;
var errMsgHolder = document.getElementById("message");
if (wachtwoord.length < 3 || wachtwoord.length >30) {
errMsgHolder.innerHTML =
'<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Kies een wachtwoord van minimaal 3 en maximaal 30 tekens.</div>';
setTimeout(function () {document.getElementById("message").innerHTML =''; }, 5000);
return false;
}
}

要检查 2 个密码是否匹配:

function checkPasswordsMatch() {
var x = document.registerForm;
var wachtwoord = x.wachtwoord.value;
var herhaal_wachtwoord = x.herhaal_wachtwoord.value;
var errMsgHolder = document.getElementById("message");
if (wachtwoord !== herhaal_wachtwoord) {
errMsgHolder.innerHTML =
'<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Wachtwoorden komen niet overeen.</div>';
return false;
}
}

检查用户名是否已存在(通过 php ajax 调用数据库):

function checkBestaandeGebruikersnaam(){
var x = document.registerForm;
var gebruikersnaam = x.gebruikersnaam.value;
var errMsgHolder = document.getElementById("message");
var request = new XMLHttpRequest();

request.onreadystatechange = function() {
if(request.readyState === 4 && request.status === 200) {
if(request.responseText == "1") {
errMsgHolder.innerHTML = '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Die gebruikersnaam is al bezet, kies een andere gebruikersnaam.</div>';
return false;
}
else {
errMsgHolder.innerHTML = '';
}
} else {
errMsgHolder.innerHTML = 'An error occurred during your request: ' + request.status + ' ' + request.statusText;
}
}
request.open("POST", "core/functions/checkBestaandeGebruikersnaam.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("gebruikersnaam="+gebruikersnaam);
}

但这些函数只是显示警报,并不能阻止用户提交包含错误数据的表单。所以我想在用户提交时重新访问这些功能。为此,我在 HTML 注册表单中添加了以下行:

<form action="register.php" onsubmit="return validate()" name="registerForm" method="post" class="col-md-10 col-md-offset-1 col-xs-12 col-xs-offset-0">

然后在 JS 中我有以下功能:

function validate() {
var errMsgHolder = document.getElementById("message");
if(checkPassword() === false ) {
errMsgHolder.innerHTML =
'<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Kies een wachtwoord van minimaal 3 en maximaal 30 tekens.</div>';
return false;
} else if(checkPasswordsMatch() === false){
errMsgHolder.innerHTML =
'<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Wachtwoorden komen niet overeen.</div>';
return false;
} else if(checkBestaandeGebruikersnaam() === false){
errMsgHolder.innerHTML =
'<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Die gebruikersnaam is al bezet, kies een andere gebruikersnaam.</div>';
return false;
}

当我测试它时,它适用于 checkPassword()checkPasswordsMatch()。这意味着我收到了预期的 BS 警报,并且表格的提交被取消。但是当我测试 checkBestaan​​deGebruikersnaam() 时却没有。它简短地显示了 BS 警报,但随后它继续显示我的 register.php 文件。因此,由于某种原因,它会忽略 onsubmit 中返回的“false”并无论如何提交。

我无法理解它。为什么它的做法有所不同。谁能解释一下这个问题?

编辑:我已经点击了链接,并花了一天剩下的时间试图掌握回调函数的概念。我想我现在已经有了,但我的问题还没有解决。所以我肯定还是做错了什么。

由于问题显然出在我从函数 checkBestaan​​deGebruikersnaam() 返回 false 的方式上,因此我将仅列出对该函数的更改。我现在有以下代码:

HTML:

onchange="callAjax(checkBestaandeGebruikersnaam)"

JavaScript主要函数:

function callAjax(callback){
var gebruikersnaam = document.registerForm.gebruikersnaam.value;
var request = new XMLHttpRequest();

request.onreadystatechange = function() {
if(request.readyState === 4 && request.status === 200) {
callback(request.responseText);
} else {
document.getElementById("message").innerHTML = 'An error occurred during your request: ' + request.status + ' ' + request.statusText;
}
}
request.open("POST", "core/functions/checkBestaandeGebruikersnaam.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("gebruikersnaam="+gebruikersnaam);
}

JavaScript 回调函数:

function checkBestaandeGebruikersnaam(result) {
if(result == "1") {
document.getElementById("message").innerHTML = '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Die gebruikersnaam is al bezet, kies een andere gebruikersnaam.</div>';
return false;
}
else {
document.getElementById("message").innerHTML = '';
}
}

有人可以告诉我我是否正确使用了回调功能吗?它确实按预期执行(在 onchange 事件上)。

不过,validate() 函数对于 checkBestaan​​deGebruikersnaam() 仍然不起作用。即使 checkBestaan​​deGebruikersnaam() === false,它仍然会执行。我现在做错了什么?请赐教并感谢您的宝贵时间。

最佳答案

checkBestaan​​deGebruikersnaam 永远不会返回 falseonreadystatechange 回调函数执行此操作,但它是异步执行的。因此, checkBestaan​​deGebruikersnaam 立即执行并返回(未定义的值),而您似乎期望的 return false; 会在稍后发生并被忽略。 Matteo 建议了一个用于从异步调用返回响应的链接,您应该查看该链接,它位于解决您的问题的正确轨道上。在现代 JavaScript 中,我建议使用 Promise 来处理这个问题。链。

解决此问题的另一种方法是,只要满足所需条件,即从 javascript 显式提交表单 - 例如在 onreadystatechange 方法中,因此您不必担心异步状态控制。表单元素有一个可以调用的 submit 方法。

关于javascript - onsubmit 返回 false,但提交仍然执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37050503/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com