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

【问题标题】：OnSubmit Calls a function that invokes 3 function and checks return_type, but 1 function is not getting invokedOnSubmit 调用调用 3 个函数并检查 return_type 的函数，但未调用 1 个函数
【发布时间】：2020-04-25 15:50:05
【问题描述】：

从用户获取值的表单，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");
    }
}

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

当函数 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();
}

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

}
 ?>

【问题讨论】：

标签： javascript php css ajax bootstrap-4

【解决方案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.
}

【讨论】：

我只将 true 更改为 false 并且它起作用了 - xhttp.open("GET","emailvalidate.php?uemail="+email,false);
只是 click_to() 函数中的一个问题，我有这行代码 - xhttp.open("GET","submited_captcha.php?captcha="+code,true);但它仍然有效，为什么会这样？为什么它不能与 check_email() 一起使用？
也许 check_email() 需要一些时间才能得到回复。在收到 check_email 的响应之前，其他两个函数已被执行。
是的，你可能是对的，因为 click_to() 只是将变量中的值与会话变量进行比较，而 check_email() 正在触发查询并检查结果是否匹配
照你说的做了，谢谢朋友的帮助。我是网络开发的新手，有任何提高我知识的技巧。我需要提高我的代码可读性或代码逻辑吗？

【解决方案2】：

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

在function关键字之前添加async，在check_emailfunction之前添加await关键字。

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

}

【讨论】：

那么 click_to() 如何给我想要的输出？由于 check_email() 和 click_to() 具有相同类型的代码结构
由于click_to 也是一个异步函数，并且在您当前的代码中它返回未定义，这是一个虚假值。 click_to 立即执行并返回，但 ajax 调用是异步调用，稍后会执行。
您可以控制台记录click_to_func 并在控制台中查看值。
很抱歉上面的代码不起作用。当我提交带有空白输入的表单时，它用于提交带有空白值的表单。