密碼和確認密碼不匹配

Question

我有一個密碼，並確認密碼字段，如下所示。 在此處輸入圖片說明

我在2種其他不同形式中使用了相同的元素和腳本，但在其中一種形式中不起作用。

 var password = document.getElementById('pwd'), confirm_password = document.getElementById('cpwd'); function validatePassword() { if (password.value != confirm_password.value) { confirm_password.setCustomValidity('Passwords Don\\'t Match'); } else { confirm_password.setCustomValidity(''); } } password.onchange = validatePassword; confirm_password.onkeyup = validatePassword; 

 <div class="input-field col s12 m6"> <input id="pwd" name="pwd" type="password" class="validate" minlength="8" required=""> <label for="pwd" data-error="Please enter a name of length minum 8 characters" data-success="Perfect!">Desired Password<span class="red-text">&nbsp;*</span></label> </div> <div class="input-field col s12 m6"> <input id="cpwd" name="cpwd" type="password" class="validate" required=""> <label for="cpwd" data-error="Please enter the same password again" data-success="Perfect!">Confirm password<span class="red-text">&nbsp;*</span></label> </div> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> 

Answer 1

建議不要監聽keyup或change事件，而建議監聽input事件。

從有關MDN的相關文章中 ：

更改<input>或<textarea>元素的值時，將同步觸發DOM input事件。

 var password = document.getElementById('pwd'), confirm_password = document.getElementById('cpwd'); function validatePassword() { if (password.value !== confirm_password.value) { confirm_password.setCustomValidity("Passwords Don't Match"); } else { confirm_password.setCustomValidity(''); } } password.oninput = validatePassword; confirm_password.oninput = validatePassword; 

 <div class="input-field col s12 m6"> <input id="pwd" name="pwd" type="password" class="validate" minlength="8" required=""> <label for="pwd" data-error="Please enter a name of length minum 8 characters" data-success="Perfect!">Desired Password<span class="red-text">&nbsp;*</span></label> </div> <div class="input-field col s12 m6"> <input id="cpwd" name="cpwd" type="password" class="validate" required=""> <label for="cpwd" data-error="Please enter the same password again" data-success="Perfect!">Confirm password<span class="red-text">&nbsp;*</span></label> </div> 

Answer 2

Password: <input id="pwd" name="pwd" type="password"><br><br>
Conform Password: <input id="cpwd" name="cpwd" type="password">
<div id="errorMsg"></div>
<script>
var password = document.getElementById('pwd');
confirm_password = document.getElementById('cpwd');
    function validatePassword() {
        if ((confirm_password.value!='')&&(password.value != confirm_password.value)) {
            document.getElementById('errorMsg').innerHTML='Passwords Don\'t Match';
        } else {
            document.getElementById('errorMsg').innerHTML='';
        }
    }
    password.onchange = validatePassword;
    confirm_password.onkeyup = validatePassword;
</script>

Answer 3

顯然，這只是其余腳本中的類沖突，因此沒有任何問題。

抱歉，添麻煩了。

感謝您的所有努力。