javascript - onsubmit返回false，但是无论如何提交执行

我又迷路了。我有一个包含三个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;
    }
}

要检查两个密码是否匹配：

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警报，并且该表单的提交已取消。但是，当我测试checkBestaandeGebruikersnaam()时，它不会。它简要显示了BS警报，但随后继续显示我的register.php文件。因此由于某种原因，它会在onsubmit中忽略返回的“ false”，并且无论如何都会提交。

我无法解决这个问题。为什么这样做的方式有所不同。任何人都可以阐明这个问题吗？

编辑：我已跟踪该链接，并在一天的余下时间中试图掌握回调函数的概念。我想我现在有，但是我的问题没有解决。因此，我仍然必须做错事。

因为问题显然出在我从函数checkBestaandeGebruikersnaam()返回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()仍然不适用于checkBestaandeGebruikersnaam()。即使checkBestaandeGebruikersnaam() === false，它仍然会执行。我现在做错了什么？请赐教，谢谢您的宝贵时间。

最佳答案

checkBestaandeGebruikersnaam从不返回false。 onreadystatechange回调函数可以，但是可以异步执行。因此，checkBestaandeGebruikersnaam立即执行并返回（一个未定义的值），而您似乎期望的return false;会在以后的某个时间发生并被忽略。 Matteo建议了一个用于从异步调用返回响应的链接，您应该检查一下该链接，它在解决问题的正确途径上。在现代JavaScript中，我建议使用Promise链处理此问题。

解决此问题的另一种方法是，每当需要的条件通过时，就从javascript中显式提交表单-例如从onreadystatechange方法中进行，因此您不必担心异步状态控制。 form元素具有可以调用的submit方法。