logo标签列表

如何在不重新加载页面的情况下检查表单中的确认密码字段

javascriptjqueryajax
76

我有一个项目，需要添加一个注册表单。我希望能够在不点击注册按钮的情况下验证密码和确认密码是否相同。

如果密码和确认密码字段不匹配，则我还想在确认密码字段旁边放置一个错误消息并禁用注册按钮。

以下是我的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>

有没有任何方法可以做到这一点？

可能是HTML-更改\更新页面内容而不刷新\重新加载页面的重复问题。 - Amal Murali
1
有很多种方法，你尝试了哪一种？ - A. Wolff
15个回答
0
   <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>

希望能对你有所帮助

0

试试这个;

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>

JQuery

$('#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});
    }
});
0

在不点击按钮的情况下，您将需要监听输入字段的更改事件

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" />

希望这能对你有所帮助

0
由 #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>
0

我认为这个例子很好，可以检查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;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接