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

Question

1. 从用户获取值的表单，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>

1. 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");
    }
}

3.check_email() 没有调用 OnSubmit

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");
  }

  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");
        return 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");
      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");
      return false;
      }
      else{
        document.getElementById("alert").innerHTML=xhttp.responseText;
        //document.getElementById("submit-button").disabled = true;
        console.log("Error fetching email id");
        return false;
      }
    }
  };
  xhttp.open("GET","emailvalidate.php?uemail="+email,true);
  xhttp.send();
}

1. 当调用函数 click_to() 和 check() 并提供所需的验证时

function click_to(){
  var code = document.getElementById("captcha").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("captcha-result").style.display="inline";
    if(xhttp.responseText=="EMP"){
      document.getElementById("captcha-result").innerHTML="<br><span class='badge badge-pill badge-info'>Cannot be Kept Empty</span>";
      //document.getElementById("submit-button").disabled = true;
      console.log("Cannot be empty return false");
      return false;
    }
    else if(xhttp.responseText=="INVALID"){
      document.getElementById("captcha-result").innerHTML="<br><span class='badge badge-pill badge-info'>Invalid Captcha code</span>";
      //document.getElementById("submit-button").disabled = true;
      console.log("Invalid code return false");
      return false;
    }
    else if(xhttp.responseText=="VALID"){
    document.getElementById("captcha-result").innerHTML="<br><span class='badge badge-pill badge-success' >Valid Captcha code</span>";
    //document.getElementById("submit-button").disabled = false;
    console.log("valid code return true");
    return true;
    }
    else{
      document.getElementById("captcha-result").innerHTML=xhttp.responseText;
    //  document.getElementById("submit-button").disabled = true;
    console.log("Error return false");
      return false;
    }
  }
};
xhttp.open("GET","submited_captcha.php?captcha="+code,true);
xhttp.send();
}

1. Check()函数代码如下

function check(){
    var uname=document.forms["register_form"]["uname"].value;
    var uemail=document.forms["register_form"]["uemail"].value;
    var upassword=document.forms["register_form"]["upassword"].value;
    var ucpassword=document.forms["register_form"]["ucpassword"].value;
    var captcha=document.forms["register_form"]["captcha"].value;
    var upassword_length=upassword.length;
    if(uname=="" || uemail=="" || upassword=="" || ucpassword=="" || captcha==""){
      alert("all fields must be filled out");
      console.log("all fields must be filled");
      return false;
    }
    else if (upassword.length <= 6 ) {
      alert("Password length should be more than 6 Characters ");
      console.log("pass length not more than 6");
      return false;
    }
    else if(upassword != ucpassword){
      alert("Confirm password should be same as password");
      console.log("pass not matching");
      return false;
    }
    else{
      alert("All fields filled");
      console.log("true all fields filled");
      return true;
    }

  }

6.check_email() 和 click_to() 里面有ajax脚本。 下面是 chech_email() 中的 ajax 脚本调用的 php 页面

<?php
$eid=$_GET['uemail'];
if(empty($eid)){
  echo "EMP";
}
else{
$conn=mysqli_connect("localhost","root","","db_pagination");
if(!$conn){
  die("connection error".mysqli_connect_error());
}
$sql="select email_id from user where email_id='$eid' ";
$result=mysqli_query($conn,$sql);
if(!$result){
  echo "error:".mysqli_error($conn);
}
$row=mysqli_num_rows($result);
if($row==0){
  echo "OK";  
}
if($row > 0){
  echo "NO";
}

}
 ?>

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.
}