如何禁用提交按鈕，直到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"/>