忽略错误值

时间:2016-05-06 10:17:42

标签: javascript html ajax

我有一个注册表单,如果用户名已存在则会检查更改并显示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值并提交表单。我认为使用回调函数应该可以解决这个问题,但显然我仍然做错了。请赐教,感谢您的时间。

2 个答案:

答案 0 :(得分:1)

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

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

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

validate()中,支票checkBestaandeGebruikersnaam() === false评估为false

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

答案 1 :(得分:0)

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

我决定使用变量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帮我上路。