- 从用户获取值的表单，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";
}
}
?>
最佳答案
将异步参数值更新为 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.
}
关于javascript - OnSubmit 调用调用 3 个函数并检查 return_type 的函数，但未调用 1 个函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59640274/