输入时检查密码匹配

Question

输入时检查密码匹配

41

我有一个注册表单，包括“密码”和“确认密码”的输入字段。我想在用户输入时检查“确认密码”是否与“密码”匹配，并显示相应的消息。所以我尝试了这个：

以下是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-也没有起作用。

那么该怎么做呢？

谢谢！

- Igal

我认为这是逻辑错误... KeyUp绑定了您的消息在每个KeyUp事件上，我认为最好在focusout事件上调用函数。 - Sanjay Goswami

无效的语法实际上是问题所在。如下答案所述，您可以在jquery中处理所有这些内容，因为您已经在使用它，或者只需更改事件名称为onchange（当字段失去焦点时触发onchange，因此一旦您转到其他字段或单击外部，您应该得到所需的内容），或者将事件名称更改为onkeyup而不是onChange和onKeyUp。 - Alok Swain

1

@SanjayGoswami - 脚本不会绑定多次。这些由w3c描述的内置事件需要一个脚本值，并在元素发生该事件时执行它。 - Alok Swain

我已经编辑了你的问题，修复了第一个“不起作用”（你可能使用的最无用的描述），但是我对第二个“不起作用”一无所知。请随意自行修复。 - Álvaro González

非常感谢大家的见解！我现在已经改为使用jQuery处理，效果很好！作为一个初学者，我正在阅读和学习，所以非常感谢你们的建议！再次感谢！ - Igal

@Igal 问题：您是否在用户输入密码时向其显示密码是否有效？从安全角度来看，这可能存在缺陷，因为可能会有人猜出别人的密码。 - Skytiger

7个回答

11

以下是一个可工作的jsfiddle链接：

http://jsfiddle.net/dbwMY/

需要注意以下几点：

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

话虽如此，验证已经是一个解决好的问题，有许多框架可以实现这个功能。

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

我建议您使用其中之一，而不是为每个应用程序重新实现验证。

- reach4thelasers

谢谢！我会查看这个验证，看起来很有趣和有用！ - Igal

在原始示例中，它的类型是"password"。而你的示例使用的是文本类型。 - Maxim

可以操作 - 三年前我写的时候就可以了，现在依然有效 :) - reach4thelasers

6

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

Demo here

- Salman A

1

+1 没有必要加载 jQuery 并继续使用 20 世纪 90 年代的内联 JavaScript :) - Álvaro González

@Salman 这是一个有趣的方法，我不太熟悉。可以告诉我在哪里可以读到更多相关信息吗？谢谢！ - Igal

@Igal：你是在谈论?:JavaScript三元运算符吗？ - Salman A

@Salman 是的，关于它们，没错。以前从未见过！感谢提供链接！ - Igal

4

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


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



});

- sandeep

3

在这种情况下的问题是，onchange事件只有在输入框失去焦点时才会触发，因此您可能希望改为监听keyup事件，该事件在每次按键时触发。另外，我更喜欢使用jQuery捕获事件而不是使用内联JavaScript。

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

- Christofer Eliasson

2

如果我们使用Bootstrap，根据结果，文本将会变成绿色或红色。

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

- Adam Colton

1

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>

- Álvaro González

嗯，是的，它起作用了。我想知道为什么第一次尝试时它没有起作用... 挠头谢谢！ - Igal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- musefan · Accepted Answer

你的onChange事件语法可能是无效的，我避免在HTML内部使用它，因为我认为这样很混乱，而且即使在最好的情况下也很难保持JavaScript整洁。

我更愿意在JavaScript的文档准备就绪事件中注册事件。如果您想在用户输入时进行验证，那么您肯定还需要使用keyup事件：

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

这里有一个可用的例子

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

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

这里有一个可运行的示例