Question

我有一个注册表单，如果用户名已存在则会检查更改并显示BS警报。检查它的功能使用Ajax。我之前的问题的答案促使我改进我的代码以在我的Ajax函数中使用回调。所以现在我有以下代码：

HTML：

onchange="callAjax('gebruikersnaam', document.getElementById('gebruikersnaam').value, checkBestaandeGebruikersnaam)"

JavaScript主要功能：

function callAjax(arg1, arg2, callback){
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(arg1+"="+arg2);    
}

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 = '';
}
}

现在我有一个通用的Ajax请求，我可以通过提供不同的参数来重复使用它。所以，谢谢你。有人可以确认我是否正确使用回调功能吗？

现在，我真正想要的是在提交表单时重用函数checkBestaandeGebruikersnaam()。我有以下代码：

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">

JavaScript的：

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()不使用Ajax，它们在函数validate()中按预期工作。但是，当我为validate()测试函数checkBestaandeGebruikersnaam()时，它不起作用。它忽略false值并提交表单。我认为使用回调函数应该可以解决这个问题，但显然我仍然做错了。请赐教，感谢您的时间。

Answer 1

让我们一步一步评估发生的事情：

validate()函数调用checkBestaandeGebruikersnaam()而不传递任何参数。

在checkBestaandeGebruikersnaam()内，result的值未定义，执行的else块不返回任何内容。

在validate()中，支票checkBestaandeGebruikersnaam() === false评估为false。

由于validate()没有返回false，因此这会使javascript提交表单。

Answer 2

发布我的解决方案，也许它会帮助其他一些新手。

我决定使用变量validate()来评估checkBG，它应该从checkBestaandeGebruikersnaam()中的'result'获取其值。但由于checkBG应该可用于其他函数，因此我不使用var关键字将其设为全局变量，如下所示：

function checkBestaandeGebruikersnaam(result) {
checkBG = result;
if(checkBG == "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>';
}
else {
    document.getElementById("message").innerHTML = '';
}
}

然后我使用变量checkBG作为validate()函数中的条件：

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(checkBG == "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;
} 
}

这实际上有效，几个小时的折磨终于取得了胜利！再次感谢Kashif帮我上路。

忽略错误值

2 个答案: