如何禁用提交按钮，直到Javascript中的密码字段匹配？

Question

我在下面有这个javascript：

 <script type="text/javascript">

    function PassCheck() {

    var password = document.getElementById('password');
    var vpassword = document.getElementById('vpassword');

    if(password.value!= vpassword.value){
        document.getElementById("button1").disabled = true;  
    }
        }  

</script>

HTML代码：

    Password: <input type="password" name="password" id="password" required onchange='PassCheck();'/> <br>
    Verify Password: <input type="password" name="vpassword" required id="vpassword" onchange='PassCheck();'/> <br>
  <input type="submit" value="Submit" id="button1" name="submit" onchange='PassCheck();'/>

提交按钮仅在第一次被禁用，并且disbale按钮在第二次尝试后不起作用。 我不确定为什么它不起作用。 请帮忙！ 提前致谢。

Answer 1

您只需要添加一个else条件，一旦值匹配，即可重新启用您的按钮：

 function PassCheck() { var password = document.getElementById('password'); var vpassword = document.getElementById('vpassword'); if (password.value != vpassword.value) { document.getElementById("button1").disabled = true; } else { document.getElementById("button1").disabled = false; } } 

 Password: <input type="password" name="password" id="password" required onchange='PassCheck();' /> <br> Verify Password: <input type="password" name="vpassword" required id="vpassword" onchange='PassCheck();' /> <br> <input type="submit" value="Submit" id="button1" name="submit" onchange='PassCheck();' /> 

Answer 2

仅当元素失去焦点时才会发生onchange ，因此请尝试使用onkeyup或oninput事件。 同样不要忘记将disabled设置为false 。

 function PassCheck() { var password = document.getElementById('password'); var vpassword = document.getElementById('vpassword'); document.getElementById("button1").disabled = password.value.length === 0 || password.value != vpassword.value; } PassCheck(); 

 Password: <input type="password" name="password" id="password" required onkeyup='PassCheck();'/> <br> Verify Password: <input type="password" name="vpassword" required id="vpassword" onkeyup='PassCheck();'/> <br> <input type="submit" value="Submit" id="button1" name="submit"/>