Question

所以我有这个登录表单，检查用户是否存在于数据库中，以及密码和用户名是否匹配。如果出现问题，则会显示错误消息，但即使用户出错，用户也可以提交答案！如何在答案正确之前阻止提交按钮？

<form id="login" action="loginController1.jsp" onsubmit="return validateLogin()">
        <input id="username" name="username" type="text" placeholder="Username" autofocus onkeyup="validateUsername()" required> <span id="loginstatus"> </span>   
        <input id="password" name="password" type="password" placeholder="Password" onkeyup="validateLogin()" required> 
        <span id="loginstatus1"> </span>
        <input type="submit" id="submit" value="Log in">
</form>
<script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
  function validateUsername(){
    var xmlhttp;
    var u=document.getElementById("username").value;
    var urls="checkLogin.jsp?uname="+u;

    if (window.XMLHttpRequest)
        xmlhttp=new XMLHttpRequest();// code for IE7+, Firefox, Chrome, Opera, Safari
    else 
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5

    xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4)
        document.getElementById("loginstatus").innerHTML=xmlhttp.responseText;
     }
    xmlhttp.open("GET",urls,true);  
    xmlhttp.send();
}
</script>
 <script type="text/javascript">
  function validateLogin(){
    var xmlhttp;
    var u=document.getElementById("username").value;
    var p=document.getElementById("password").value;
    var urls="checkLogin1.jsp?uname="+u+"&pwd="+p;

    if (window.XMLHttpRequest)
        xmlhttp=new XMLHttpRequest();// code for IE7+, Firefox, Chrome, Opera, Safari
    else 
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5

    xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4)
        document.getElementById("loginstatus1").innerHTML=xmlhttp.responseText;
     }
    xmlhttp.open("GET",urls,true);  
    xmlhttp.send();
}
</script>

Answer 1

默认情况下尝试禁用该按钮：

<input type="submit" id="submit" value="Log in" disabled="true">

然后在validateLogin中添加一行以启用按钮：

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4)
        document.getElementById("loginstatus1").innerHTML=xmlhttp.responseText;
    else
        document.getElementById("submit").disabled = false;
}

您可能还想将此行添加到每个验证函数的顶部：

document.getElementById("submit").disabled = true;

否则，用户可以按照以下顺序进行操作：

用户输入有效的用户名和密码
您的代码验证条目并启用登录按钮
用户将登录名或密码更改为无效的
用户点击提交按钮

登录验证javascript无法正常工作

1 个答案: