Question

在下面的代码中，实际上我使用onload（）在弹出窗口中进行了表单设计。在函数login（）中我首先检查每个字段是否需要然后在其他部分我调用loginvalidate.php页面而不在此页面刷新我在php中执行验证并且如果有任何错误显示在

<div id="result" style="color:red;"></div>

分区，但是我的查询是，如果部分在登录功能中完成，当我点击其他部分中的按钮我们的页面因为重新加载而重新加载我无法访问我的loginvalidate.php页面为什么这是请建议我，

<!doctype html>
<html>
<head>
    <script src="jquery-1.11.3.js"></script>

    <meta charset="utf-8">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script>
        function login(){
            var email=document.getElementById("email").value;
            var password=document.getElementById("pass").value;
            var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
            if(email=="" || password==""){
                alert("Every Field Is Requird");
                email.password.focus();
                return false;
             }else{
                 //alert("hii");
                 $.post('custom-look/loginvalidate.php',{uemail:email,upass:password},   //email,pass ->textbox name
                     function(data){
                         $('#result').html(data);
                });
                return false;
            }
        }

        function popup(){
            document.getElementById('light').style.display='block';
            document.getElementById('fade').style.display='block';
        }               
    </script>
</head>
<body onload="popup();">
    <div id="light" class="white_content" style="height:53%"> 
        <img class="close" src="/shopeeon/custom-look/newloginpopup/close.jpg" class="close" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';history.go(-1);"></img>  
        <!--go back to previous page using "history.go(-1)" onclick-->
        <div id="abc"> 
            <div id="popupContact-login" class="col-sm-12" >
                <form action="" id="login-form" method="post" name="form">
                    <div style="color:orange;text-align:center;width:100%;">
                        <h2 style="margin:0px;">Login to Earn Extra Cashback</h2>
                        <div id="result" style="color:red;"></div>
                    </div><br/>
                    <div class="col-sm-6 align="center" style="border-right:1px solid gray;" > <?php $reg1 = <<<var<b style="font-size:20px;font-family:arial;"> Registered User,</b> var; $reg2=<<<var<b style="color:blue;font-size:20 px;font-family:arial;"> Sign In Here </b> var; echo $reg1.$reg2; ?> </br> <input type="email" id="email" class="form-control" name="uemail" placeholder="Enter email" required/><br/>
                        <input type="password" id="pass" class="form-control" name="upass" placeholder="Enter password" required/><br/>
                        <button type="submit" onclick="return login()" id="submit" name="submit" value="submit" class="btn btn-info active btn-md">SIGN IN</button><br/>
                        <a href="redirection.php?d=<?php echo $d;?>" id="continue">Else Redirect without Sign In</a>
                    </div>
                    <div class="col-sm-6" > <?php $str1 = <<<var <b style="font-size:20px;font-family:arial;"> New User,</b> var; $str2=<<<var <b style="color:blue;font-size:20 px;font-family:arial;"> Sign Up Here </b> var; echo $str1.$str2;?>
                        <a href="signup.php"> <img src="/shopeeon/custom-look/newloginpopup/link.png" height="38"></img></a><br/> <?php $s1 = <<<var <b style="font-size:12px;font-family:arial;"><img src="/shopeeon/custom-look/newloginpopup/star.png" height="15" width="15"></img>&nbsp;WE OFFER CASHBACK WHEN YOU SHOP VIA US.</br><img src="/shopeeon/custom-look/newloginpopup/star.png" height="15" width="15"></img>&nbsp;OVER 2 LAKH CASHBACK PAID.</br><img src="/shopeeon/custom-look/newloginpopup/star.png" height="15" width="15"></img>&nbsp;OVER 1 LAKH HAPPY CUSTOMERS.</br><img src="/shopeeon/custom-look/newloginpopup/star.png" height="15" width="15"></img>&nbsp;25+ PARTNERS SITES.</br>var; echo $s1;?>
                    </div >
                </form>
            </div>
        </div>
    </div>
    <div id="fade" class="black_overlay"></div>
</body>
</html>

Answer 1

点击按钮表单提交会触发，它会重新加载页面。所以给onsubmit =＆＃34;返回false＆＃34;形成以防止页面加载。

如下面的代码

<form onsubmit="return false">
</form>

希望这会对你有所帮助。

Answer 2

第一名：该行期望做什么？ email.password.focus();它会给你一个错误..所以你可以使用

if(email=="" || password=="")
    {
        alert("Every Field Is Requird");
        if(email == ""){
          email.focus();
        }
        // check the same way for password
    }
    else......

第二名：最好不要将jquery与纯javascript混合

在您的函数中提交表单

第三，防止页面重新加载，以便您可以使用在HTML中

<form onsubmit="login();">  // instead of the submit input click event

和你的功能

function login()
{
    var email=$('#email').val();
    var password=$("#pass").val();
    var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
    if(email=="" || password=="")
    {
        alert("Every Field Is Requird");
        //email.password.focus();
    }
    else
    {
        //alert("hii");
            $.post('custom-look/loginvalidate.php',{uemail:email,upass:password},   //email,pass ->textbox name
            function(data)
            {
                $('#result').html(data);
            });

    }
    return false;
}

或者您可以使用e.preventDefault();

<form onsubmit="login(e);">  // instead of the submit input click event

和你的功能

function login(e)
{
    e.preventDefault();
    var email=$('#email').val();
    var password=$("#pass").val();
    var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
    if(email=="" || password=="")
    {
        alert("Every Field Is Requird");
        //email.password.focus();
    }
    else
    {
        //alert("hii");
            $.post('custom-look/loginvalidate.php',{uemail:email,upass:password},   //email,pass ->textbox name
            function(data)
            {
                $('#result').html(data);
            });

    }
    //return false;
}

单击按钮时为什么会加载页面

2 个答案: