密码和确认密码不匹配
Password and confirm password don't match
我有一个密码和确认密码字段,如下所示。enter image description here
我在其他 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"> *</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"> *</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>
我建议不要使用 keyup
或 change
事件,而是收听 input
事件。
来自the relevant article on MDN:
The DOM input
event is fired synchronously when the value of an <input>
or <textarea>
element is changed.
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"> *</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"> *</span></label>
</div>
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>
显然这只是其余脚本中的 class 冲突,因此没有任何问题。
抱歉给您带来麻烦。
感谢您的所有努力。
我有一个密码和确认密码字段,如下所示。enter image description here
我在其他 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"> *</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"> *</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>
我建议不要使用 keyup
或 change
事件,而是收听 input
事件。
来自the relevant article on MDN:
The DOM
input
event is fired synchronously when the value of an<input>
or<textarea>
element is changed.
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"> *</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"> *</span></label>
</div>
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>
显然这只是其余脚本中的 class 冲突,因此没有任何问题。
抱歉给您带来麻烦。
感谢您的所有努力。