![](/img/trans.png)
[英]how to check confirm password field in form without reloading page or clicking on button?
[英]how to check confirm password field in form without reloading page
我有一個項目,我必須在其中添加一個注冊表單,我想驗證密碼和確認字段是否相同,而無需單擊注冊按鈕。
如果密碼和確認密碼字段不匹配,那么我還想在確認密碼字段旁邊放置一條錯誤消息並禁用注冊按鈕。
以下是我的html代碼..
<form id="form" name="form" method="post" action="registration.php">
<label >username :
<input name="username" id="username" type="text" /></label> <br>
<label >password :
<input name="password" id="password" type="password" /></label>
<label>confirm password:
<input type="password" name="confirm_password" id="confirm_password" />
</label>
<label>
<input type="submit" name="submit" value="registration" />
</label>
有沒有辦法做到這一點? 在此先感謝您的幫助。
我們將研究兩種方法來實現這一目標。 使用和不使用 jQuery。
您需要在密碼和確認密碼字段中添加keyup功能。 原因是即使password
字段更改,也應檢查文本是否相等。 感謝@kdjernigan 指出這一點
這樣,當您在字段中鍵入時,您將知道密碼是否相同:
$('#password, #confirm_password').on('keyup', function () { if ($('#password').val() == $('#confirm_password').val()) { $('#message').html('Matching').css('color', 'green'); } else $('#message').html('Not Matching').css('color', 'red'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>password : <input name="password" id="password" type="password" /> </label> <br> <label>confirm password: <input type="password" name="confirm_password" id="confirm_password" /> <span id='message'></span> </label>
這是小提琴: http : //jsfiddle.net/aelor/F6sEv/325/
我們將在兩個字段上使用 javascript 的onkeyup事件來實現相同的效果。
var check = function() { if (document.getElementById('password').value == document.getElementById('confirm_password').value) { document.getElementById('message').style.color = 'green'; document.getElementById('message').innerHTML = 'matching'; } else { document.getElementById('message').style.color = 'red'; document.getElementById('message').innerHTML = 'not matching'; } }
<label>password : <input name="password" id="password" type="password" onkeyup='check();' /> </label> <br> <label>confirm password: <input type="password" name="confirm_password" id="confirm_password" onkeyup='check();' /> <span id='message'></span> </label>
這是小提琴: http : //jsfiddle.net/aelor/F6sEv/324/
如果您不想使用 jQuery:
function check_pass() {
if (document.getElementById('password').value ==
document.getElementById('confirm_password').value) {
document.getElementById('submit').disabled = false;
} else {
document.getElementById('submit').disabled = true;
}
}
<input type="password" name="password" id="password" onchange='check_pass();'/>
<input type="password" name="confirm_password" id="confirm_password" onchange='check_pass();'/>
<input type="submit" name="submit" value="registration" id="submit" disabled/>
比較其change
事件中的密碼/確認密碼輸入值並相應地setCustomValidity :
function onChange() { const password = document.querySelector('input[name=password]'); const confirm = document.querySelector('input[name=confirm]'); if (confirm.value === password.value) { confirm.setCustomValidity(''); } else { confirm.setCustomValidity('Passwords do not match'); } }
<form> <label>Password: <input name="password" type="password" onChange="onChange()" /> </label><br /> <label>Confirm : <input name="confirm" type="password" onChange="onChange()" /> </label><br /> <input type="submit" /> </form>
使用jQuery的解決方案
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<style>
#form label{float:left; width:140px;}
#error_msg{color:red; font-weight:bold;}
</style>
<script>
$(document).ready(function(){
var $submitBtn = $("#form input[type='submit']");
var $passwordBox = $("#password");
var $confirmBox = $("#confirm_password");
var $errorMsg = $('<span id="error_msg">Passwords do not match.</span>');
// This is incase the user hits refresh - some browsers will maintain the disabled state of the button.
$submitBtn.removeAttr("disabled");
function checkMatchingPasswords(){
if($confirmBox.val() != "" && $passwordBox.val != ""){
if( $confirmBox.val() != $passwordBox.val() ){
$submitBtn.attr("disabled", "disabled");
$errorMsg.insertAfter($confirmBox);
}
}
}
function resetPasswordError(){
$submitBtn.removeAttr("disabled");
var $errorCont = $("#error_msg");
if($errorCont.length > 0){
$errorCont.remove();
}
}
$("#confirm_password, #password")
.on("keydown", function(e){
/* only check when the tab or enter keys are pressed
* to prevent the method from being called needlessly */
if(e.keyCode == 13 || e.keyCode == 9) {
checkMatchingPasswords();
}
})
.on("blur", function(){
// also check when the element looses focus (clicks somewhere else)
checkMatchingPasswords();
})
.on("focus", function(){
// reset the error message when they go to make a change
resetPasswordError();
})
});
</script>
並相應地更新您的表格:
<form id="form" name="form" method="post" action="registration.php">
<label for="username">Username : </label>
<input name="username" id="username" type="text" /></label><br/>
<label for="password">Password :</label>
<input name="password" id="password" type="password" /><br/>
<label for="confirm_password">Confirm Password:</label>
<input type="password" name="confirm_password" id="confirm_password" /><br/>
<input type="submit" name="submit" value="registration" />
</form>
這將完全滿足您的要求:
建議不要對每個按鍵都使用 keyup 事件偵聽器,因為實際上您只需要在用戶完成輸入信息時對其進行評估。 如果有人在慢速機器上快速打字,他們可能會感覺到滯后,因為每次擊鍵都會啟動該功能。
此外,在您的表單中,您使用的標簽是錯誤的。 label 元素有一個“for”屬性,它應該與表單元素的 id 相對應。 這樣,當視障人士使用屏幕閱讀器調出表單字段時,它就會知道文本屬於哪個字段。
function check() {
if(document.getElementById('password').value ===
document.getElementById('confirm_password').value) {
document.getElementById('message').innerHTML = "match";
} else {
document.getElementById('message').innerHTML = "no match";
}
}
<label>password :
<input name="password" id="password" type="password" />
</label>
<label>confirm password:
<input type="password" name="confirm_password" id="confirm_password" onchange="check()"/>
<span id='message'></span>
代碼
<input type="text" onkeypress="checkPass();" name="password" class="form-control" id="password" placeholder="Password" required>
<input type="text" onkeypress="checkPass();" name="rpassword" class="form-control" id="rpassword" placeholder="Retype Password" required>
代碼
function checkPass(){
var pass = document.getElementById("password").value;
var rpass = document.getElementById("rpassword").value;
if(pass != rpass){
document.getElementById("submit").disabled = true;
$('.missmatch').html("Entered Password is not matching!! Try Again");
}else{
$('.missmatch').html("");
document.getElementById("submit").disabled = false;
}
}
嘗試像這樣使用 jquery
$('input[type=submit]').click(function(e){
if($("#password").val() == "")
{
alert("please enter password");
return false;
}
});
還要在 html 的頭部添加這一行
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
$('input[type=submit]').on('click', validate);
function validate() {
var password1 = $("#password1").val();
var password2 = $("#password2").val();
if(password1 == password2) {
$("#validate-status").text("valid");
}
else {
$("#validate-status").text("invalid");
}
}
邏輯是檢查 keyup 是否兩個字段中的值匹配。
<form id="form" name="form" method="post" action="registration.php" onsubmit="return check()">
....
</form>
<script>
$("#form").submit(function(){
if($("#password").val()!=$("#confirm_password").val())
{
alert("password should be same");
return false;
}
})
</script>
希望它可以幫助你
試試這個;
CSS
#indicator{
width:20px;
height:20px;
display:block;
border-radius:10px;
}
.green{
background-color:green;
display:block;
}
.red{
background-color:red;
display:block;
}
HTML
<form id="form" name="form" method="post" action="registration.php">
<label >username :
<input name="username" id="username" type="text" /></label> <br>
<label >password :
<input name="password" id="password" type="password" id="password" /></label> <br>
<label>confirm password:
<input type="password" name="confirm_password" id="confirm_password" /><span id="indicator"></span> <br>
</label>
<label>
<input type="submit" name="submit" id="regbtn" value="registration" />
</label>
</form>
查詢
$('#confirm_password').keyup(function(){
var pass = $('#password').val();
var cpass = $('#confirm_password').val();
if(pass!=cpass){
$('#indicator').attr({class:'red'});
$('#regbtn').attr({disabled:true});
}
else{
$('#indicator').attr({class:'green'});
$('#regbtn').attr({disabled:false});
}
});
無需單擊按鈕,您將不得不收聽輸入字段的更改事件
var confirmField = document.getElementById("confirm_password");
var passwordField = document.getElementById("password");
function checkPasswordMatch(){
var status = document.getElementById("password_status");
var submit = document.getElementById("submit");
status.innerHTML = "";
submit.removeAttribute("disabled");
if(confirmField.value === "")
return;
if(passwordField.value === confirmField.value)
return;
status.innerHTML = "Passwords don't match";
submit.setAttribute("disabled", "disabled");
}
passWordField.addEventListener("change", function(event){
checkPasswordMatch();
});
confirmField.addEventListener("change", function(event){
checkPasswordMatch();
});
然后將狀態元素添加到您的 html:
<p id="password_status"></p>
並設置提交按鈕 id 以submit
... id="submit" />
希望這對你有幫助
$box = $('input[name=showPassword]');
$box.focus(function(){
if ($(this).is(':checked')) {
$('input[name=pswd]').attr('type', 'password');
} else {
$('input[name=pswd]').attr('type', 'text');
}
})
您可以僅通過簡單的 javascript 來檢查確認密碼
html
<input type="password" name="password" required>
<input type="password" name="confirmpassword" onkeypress="register()" required>
<div id="checkconfirm"></div>
在 javascript 中
function register() {
var password= document.getElementById('password').value ;
var confirm= document.getElementById('confirmpassword').value;
if (confirm!=password){
var field = document.getElementById("checkconfirm")
field.innerHTML = "not match";
}
}
您也可以使用 onkeyup 而不是 onkeypress。
#Chandrahasa Rai 提出的代碼幾乎完美運行,只有一個例外!
觸發函數checkPass()
,我將onkeypress
更改為onkeyup
以便也可以處理最后按下的鍵。 否則,當您輸入密碼時,例如:“1234”,當您輸入最后一個鍵“4”時,腳本會在處理“4”之前觸發checkPass()
,因此它實際上會檢查“123”而不是“1234”。 你必須通過讓鍵上升來給它一個機會:) 現在一切都應該正常工作了!
#Chandrahasa Rai,HTML 代碼:
<input type="text" onkeypress="checkPass();" name="password" class="form-control" id="password" placeholder="Password" required>
<input type="text" onkeypress="checkPass();" name="rpassword" class="form-control" id="rpassword" placeholder="Retype Password" required>
#我的修改:
<input type="text" onkeyup="checkPass();" name="password" class="form-control" id="password" placeholder="Password" required>
<input type="text" onkeyup="checkPass();" name="rpassword" class="form-control" id="rpassword" placeholder="Retype Password" required>
我認為這個例子很好檢查https://codepen.io/diegoleme/pen/surIK
我可以在這里引用代碼
<form class="pure-form">
<fieldset>
<legend>Confirm password with HTML5</legend>
<input type="password" placeholder="Password" id="password" required>
<input type="password" placeholder="Confirm Password" id="confirm_password" required>
<button type="submit" class="pure-button pure-button-primary">Confirm</button>
</fieldset>
</form>
和
var password = document.getElementById("password")
, confirm_password = document.getElementById("confirm_password");
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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.