javascript - JS 验证以正常速度失败，但在单步执行代码时有效

Question

js 验证在我单步执行时完美运行，但在“正常速度”时失败。 特别是:如果捕获到虚假电子邮件但其他字段填写正确，则可以提交表单(但在单步执行代码时不会出现错误)。有没有人见过这个？我知道我可以用不同的方式对其进行编码，但我不能在不首先了解为什么它不起作用的情况下就简单地摆脱这个甚至成为瓶颈的简单问题。

我的方法是验证 onblur 和 onsubmit。我只是为了方便才使用 jquery 选择器，然后再次进行 ajax 调用，否则我使用的是 js。我正在对字段进行循环，但只对文本和密码字段进行操作。检查空白检查名字中没有数字检查电子邮件地址格式是否正确然后检查电子邮件字段中的唯一电子邮件下面的 js 注释代码和下面的表格:

//registration validation
$('.validate').blur(function() {
var theForm = document.registerNewUserForm;         
//removes error messages from html before the run
clearAllErrors(theForm);
var msg = "";
var mdiv;
theForm.submit.disabled=true;
document.getElementById("submitButton").disabled = true;

for (var i = 0; i < theForm.elements.length; i++) {

    //mdiv is set to form element being evaluated at the time
    mdiv = document.getElementById(theForm.elements[i].name + "Message");

    msg = validateField(theForm.elements[i]);
    if(msg != "") {
        mdiv.innerHTML = msg;
        break;
    }
}
if(msg == "") {
    theForm.submit.disabled=false;
    document.getElementById("submitButton").disabled = false;
}
});


$('#registerNewUserForm').submit(function() {
var theForm = document.registerNewUserForm;
clearAllErrors(theForm);
var msg = "";
var mdiv;
for (var i = 0; i < theForm.elements.length; i++) {

    //mdiv is set to form element being evaluated at the time
    mdiv = document.getElementById(theForm.elements[i].name + "Message");

    msg = validateField(theForm.elements[i]);
    if(msg != "") {
        break;
    }
}
if (msg != ""){
    mdiv.innerHTML = msg;
    return false;       
}  else {
    theForm.submit();
}   
});

function validateField(theField) {
msg = "";   
//all fields are required
if (theField.type == "text" || theField.type == "password") {
    if (theField.value == "") {
        msg = "The " + theField.name + " field is required.";
    }
}

//name fields are non-numeric
if (theField.name == "fullName"){
    if (hasNumber(theField.value) == true){
        msg= "The Name field is non-numeric.";
    }
}

//email must be correctly formatted
if (theField.name == "email") {
    msg = emailCheck (theField.value);
    if (msg == "") {
        //email address must also be unique
        chkEmail();
        msg = document.getElementById('emailMessage').innerHTML;
    }
}   
return msg;
}

function chkEmail() {
emailAddr = document.getElementById("email").value;
$.ajax({
    url: '/chkEmail',
    type: 'POST',
    data: 'emailAddr=' + encodeURIComponent(emailAddr),
    dataType: "xml",
    context: document.body,
    success: function(data) {
        document.getElementById('emailMessage').innerHTML = $(data).find("message").text();
    }
});
}


<form name="registerNewUserForm" id="registerNewUserForm" action="/register" method="post">
    <br/>
    <div>Create an Account and join the fun!</div>
    <div><input class="validate" type="text" id="fullName" required placeholder="Full Name" name="fullName" value="" size="30"></div>
    <div id="fullNameMessage" class="error"></div>
    <div><input class="validate" type="text" id="email" required placeholder="Email Address" name="email" value="" size="30"></div>
    <div id="emailMessage" class="error"></div>
    <div><input class="validate" type="password" id="passWord" required placeholder="Password" name="passWord" value="" size="30"></div>
    <div id="passWordMessage" class="error"></div>
    <div style="position:relative;left:173px;"><input id="submitButton" type="submit" value="Signup for PastelPlanet"></div>
    <input type="hidden" name="formName" value="registerNewUserForm">
    <input type="hidden" name="urlDestination" value="">
</form>

Answer 1

您的“chkEmail”函数涉及对服务器的调用，并且它是异步。当函数返回时，当您以“全速”运行时，对服务器的调用将不会完成。