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

我有一个项目，我必须在其中添加注册表单，我想validation密码和确认字段是否相等而不单击注册按钮。

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

以下是我的HTML代码..

 username :  
 password :  confirm password:      

有没有办法做到这一点？ 在此先感谢您的帮助。

Answer 1

我们将研究实现这一目标的两种方法。 使用和不使用jQuery。

1.使用jQuery

您需要为密码和确认密码字段添加密钥function。 原因是即使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'); }); 

  password :   
 confirm password:    

Answer 2

如果你不想使用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; } } 

Answer 3

解决方案使用jQuery

并相应地更新您的表单：

  Username :  
 Password : 
 Confirm Password: 
   

这将完全符合您的要求 ：

• validation密码和确认字段是否相等而不单击注册按钮
• 如果密码和确认密码字段不匹配，则会在确认密码字段旁边发出错误消息并禁用注册按钮

建议不要为每个按键使用keyup事件监听器，因为实际上只需要在用户输入信息时对其进行评估。 如果有人在慢速机器上快速键入，他们可能会感觉到滞后，因为每次按键都会启动该function。

此外，在您的表单中，您使用的标签错误。 label元素有一个“for”属性，它应该与表单元素的id相对应。 这是因为当视障人士使用屏幕阅读器调出表单字段时，它将知道文本属于哪个字段。

Answer 4

 function check() { if(document.getElementById('password').value === document.getElementById('confirm_password').value) { document.getElementById('message').innerHTML = "match"; } else { document.getElementById('message').innerHTML = "no match"; } } 

 password :   confirm password:   

Answer 5

尝试使用像这样的jquery

 $('input[type=submit]').click(function(e){ if($("#password").val() == "") { alert("please enter password"); return false; } }); 

也在html的头部添加这一行

Answer 6

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

如果两个字段中的值匹配，则逻辑是检查密钥。

• 工作小提琴： http ： //jsfiddle.net/dbwMY/
• 更多详细信息： 键入时检查密码匹配

Answer 7

  
 .... 
  

希望它可以帮助你

Answer 8

试试这个;

CSS

 #indicator{ width:20px; height:20px; display:block; border-radius:10px; } .green{ background-color:green; display:block; } .red{ background-color:red; display:block; } 

HTML

 
 username :  
 password :  
 confirm password:  
      

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}); } }); 

Answer 9

在没有单击按钮的情况下，您将不得不收听输入字段的更改事件

 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(); }); 

然后将status元素添加到您的html：

并设置提交按钮ID以submit

 ... id="submit" /> 

希望这能帮助你

Answer 10

 $box = $('input[name=showPassword]'); $box.focus(function(){ if ($(this).is(':checked')) { $('input[name=pswd]').attr('type', 'password'); } else { $('input[name=pswd]').attr('type', 'text'); } }) 

Answer 11

HTML代码

JS代码

 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; } }