键入时检查密码是否匹配

Checking password match while typing

本文关键字：是否 密码 检查      更新时间：2023-09-26

我有一个带有"密码"answers"确认密码"输入字段的注册表单。我想在用户输入时检查"确认密码"是否与"密码"匹配，并给出相应的消息。所以我试着这样做：

这是HTML:

<div class="td">
    <input type="password" id="txtNewPassword" />
</div>
<div class="td">
    <input type="password" id="txtConfirmPassword" onChange="checkPasswordMatch();" />
</div>
    <div class="registrationFormAlert" id="divCheckPasswordMatch">
</div>

这是checkPasswordMatch（）函数：

function checkPasswordMatch() {
    var password = $("#txtNewPassword").val();
    var confirmPassword = $("#txtConfirmPassword").val();
    if (password != confirmPassword)
        $("#divCheckPasswordMatch").html("Passwords do not match!");
    else
        $("#divCheckPasswordMatch").html("Passwords match.");
}

只有当用户离开字段时，才在键入时验证。

我尝试使用onKeyUp而不是onChange，但也没有成功。

那么怎样才能做到呢？

谢谢！

在onChange事件中可能有无效语法，我避免这样使用（在html中），因为我认为这很混乱，而且在最好的情况下保持JavaScript整洁已经足够困难了。

我宁愿用javascript在文档就绪事件上注册该事件。如果你想在用户输入时进行验证，你也肯定想使用keyup事件

$(document).ready(function () {
   $("#txtConfirmPassword").keyup(checkPasswordMatch);
});

以下是的工作示例

就我个人而言，我更喜欢在任何一个密码字段更改时进行检查，这样，如果他们重新键入原始密码，那么你仍然会得到相同的验证检查：

$(document).ready(function () {
   $("#txtNewPassword, #txtConfirmPassword").keyup(checkPasswordMatch);
});

下面是一个工作示例

这是一个正在工作的jsfiddle

http://jsfiddle.net/dbwMY/

需要注意的事项：

  • 验证document.ready函数中绑定的事件处理程序-否则加载JS时将不存在输入
  • 使用keyup

也就是说，验证是一个已解决的问题——有一些框架实现了这一功能。

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

我建议使用其中一个，而不是对你编写的每个应用程序重新实现验证。

$(function() {
    $("#txtConfirmPassword").keyup(function() {
        var password = $("#txtNewPassword").val();
        $("#divCheckPasswordMatch").html(password == $(this).val()
            ? "Passwords match."
            : "Passwords do not match!"
        );
    });
});​

此处演示

$('#txtConfirmPassword').keyup(function(){

if($(this).val() != $('#txtNewPassword').val().substr(0,$(this).val().length))
{
 alert('confirm password not match');
}

});

这种情况下的问题是，在输入失去焦点之前，onchange事件不会触发，因此您可能需要监听keyup事件，该事件在每次击键时都会触发。

此外，我更喜欢不使用内联javascript，而是使用jQuery捕获事件。

$("#txtConfirmPassword").keyup(checkPasswordMatch);

如果我们使用引导程序，根据的结果，我们的文本将是绿色或红色

HTML

<div class="col-12 col-md-6 col-lg-4 mb-3">
            <label class="form-group d-block mb-0">
        <span class="text-secondary d-block font-weight-semibold mb-1">New Password</span>
<input type="password" id="txtNewPassword" class="form-control">     
        </label>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <label class="form-group d-block mb-0">
        <span class="text-secondary d-block font-weight-semibold mb-1">Confirm Password
        </span>
        <input class="form-control" type="password" id="txtConfirmPassword" onkeyup="checkPasswordMatch();">   
            </label>
        </div>
        <div class="registrationFormAlert" id="divCheckPasswordMatch"></div>

CSS

.text-success {
    color: #28a745;
}
.text-danger {
    color: #dc3545;
}

JS-

function checkPasswordMatch() {
        var password = $("#txtNewPassword").val();
        var confirmPassword = $("#txtConfirmPassword").val();
        if (password != confirmPassword)
            $("#divCheckPasswordMatch").html("Passwords do not match!").addClass('text-danger').removeClass('text-success');
        else
            $("#divCheckPasswordMatch").html("Passwords match.").addClass('text-success').removeClass('text-danger');
    }

onkeyup事件按您的意愿"工作"：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript"><!--
function checkPasswordMatch() {
    var password = $("#txtNewPassword").val();
    var confirmPassword = $("#txtConfirmPassword").val();
    if (password != confirmPassword)
        $("#divCheckPasswordMatch").html("Passwords do not match!");
    else
        $("#divCheckPasswordMatch").html("Passwords match.");
}
//--></script>
</head>
<body>
<div class="td">
    <input type="password" id="txtNewPassword" />
</div>
<div class="td">
    <input type="password" id="txtConfirmPassword" onkeyup="checkPasswordMatch();" />
</div>
    <div class="registrationFormAlert" id="divCheckPasswordMatch">
</div>
</body>
</html>
相关文章：