OnSubmit 调用调用 3 个函数并检查 return_type 的函数，但未调用 1 个函数

Question

从用户获取值的表单，OnSubmit 调用函数 check_three_func()<form method="post" action="register_action.php" id="register_form" name="register_form" onsubmit="return check_three_func()">  <br>  <div class="form-group">    <label for="uname">Name:</label>    <input type="text" class="form-control" id="uname" placeholder="Enter Name " name="uname">  </div>  <div class="form-group">    <label for="uemail">Email id: </label>    <input type="email" class="form-control" id="uemail" placeholder="Enter Email ID" name="uemail">    <!-- onkeyup="javascript:validate(this.value)" -->    <span id="alert" style="display:none"></span>  </div>  <div class="form-group">    <label for="upassword">Enter Password:</label>    <input type="password" class="form-control" id="upassword" placeholder="Set password" name="upassword">  </div>  <div class="form-group">    <label for="ucpassword">Confirm Password:</label>    <input type="password" class="form-control" id="ucpassword" placeholder="Enter password again" name="ucpassword" >  </div>  <!-- captcha div -->  <div class="form-group">    <img src="captcha.php" class="rounded" alt="Captcha"><br>    <label for="captcha">Enter Captcha: </label>    <input type="text" class="form-control" id="captcha"  name="captcha" maxlength="6">     <!-- onkeyup="javascript:captcha_func(this.value)" -->     <span id="captcha-result" style="display:none"></span>  </div>  <button type="submit" class="btn btn-success" id="submit-button" >Submit</button></form>check_three_func() 在代码中调用下面提到的 3 个函数并返回 return_type，因此如果为 false 则无法提交表单function check_three_func(){    var check_email_func=check_email();    var click_to_func=click_to();    var check_func=check();    if( check_email_func==true && click_to_func==true && check_func==true){      return true;      console.log("all true");    }    else{      return false;      console.log(" false");    }}

Answer 1

将异步参数值更新为 false。如果 async 参数值为 false，则 send() 方法在收到响应之前不会返回。

xhttp.open("GET","emailvalidate.php?uemail="+email,false);

试试下面的代码它会工作。

function check_email(){

  var email = document.getElementById("uemail").value;

  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

    xhttp=new XMLHttpRequest();

}

 else {// code for IE6, IE5

    xhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

  result = true; // create a variable result and by default make it true.

  xhttp.onreadystatechange=function(){

    if (xhttp.readyState == 4 && xhttp.status == 200) {

      document.getElementById("alert").style.display="inline";

      if(xhttp.responseText=="EMP"){

        document.getElementById("alert").innerHTML="<br><span class='badge badge-pill badge-info'>fill out emai id</span>";

        console.log("Email id empty return false");

        result = false;

      }

      else if(xhttp.responseText=="OK"){

      document.getElementById("alert").innerHTML="<br><span class='badge badge-pill badge-success' >welcome new user</span>";

      //document.getElementById("submit-button").disabled = false;

      console.log("New email id return true");

      }

      else if(xhttp.responseText=="NO"){

      document.getElementById("alert").innerHTML="<br><span class='badge badge-pill badge-danger'>Email Already Exist</span>";

      //document.getElementById("submit-button").disabled = true;

      console.log("Email id already exsist return false");

      result = false;

      }

      else{

        document.getElementById("alert").innerHTML=xhttp.responseText;

        //document.getElementById("submit-button").disabled = true;

        console.log("Error fetching email id");

        result = false;

      }

    }

  };

  xhttp.open("GET","emailvalidate.php?uemail="+email,false);

  xhttp.send();

  return result;  //at last return the result.

}

Answer 2

这check_email是一个异步函数。这就是为什么你没有得到返回结果。你必须调用下面的函数。

function在关键字之前添加 async并在check_email function.

async function check_three_func() {

    var check_email_func = await check_email();

    var click_to_func = click_to();

    var check_func = check();

    if (check_email_func && click_to_func && check_func) {

        return true;

        console.log("all true");

    }

    else {

        return false;

        console.log(" false");

    }

}

将您的 ajax 代码包装在一个 Promise 中，并根据响应解决或拒绝，然后返回该 Promise。

function check_email() {

    return new Promise((resolve, reject) => {

        var email = document.getElementById("uemail").value;

        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

            xhttp = new XMLHttpRequest();

        }

        else {// code for IE6, IE5

            xhttp = new ActiveXObject("Microsoft.XMLHTTP");

        }

        xhttp.onreadystatechange = function () {

            if (xhttp.readyState == 4 && xhttp.status == 200) {

                document.getElementById("alert").style.display = "inline";

                if (xhttp.responseText == "EMP") {

                    document.getElementById("alert").innerHTML = "<br><span class='badge badge-pill badge-info'>fill out emai id</span>";

                    console.log("Email id empty return false");

                    reject(false);

                }

                else if (xhttp.responseText == "OK") {

                    document.getElementById("alert").innerHTML = "<br><span class='badge badge-pill badge-success' >welcome new user</span>";

                    //document.getElementById("submit-button").disabled = false;

                    console.log("New email id return true");

                    resolve(true);

                }

                else if (xhttp.responseText == "NO") {

                    document.getElementById("alert").innerHTML = "<br><span class='badge badge-pill badge-danger'>Email Already Exist</span>";

                    //document.getElementById("submit-button").disabled = true;

                    console.log("Email id already exsist return false");

                    reject(false);

                }

                else {

                    document.getElementById("alert").innerHTML = xhttp.responseText;

                    //document.getElementById("submit-button").disabled = true;

                    console.log("Error fetching email id");

                    reject(false);

                }

            }

        };

        xhttp.open("GET", "emailvalidate.php?uemail=" + email, true);

        xhttp.send();

    });

}