键入时检查密码匹配

IT技术 javascript jquery
2021-03-18 19:27:34

我有一个带有“密码”和“确认密码”输入字段的注册表单。我想在用户输入时检查“确认密码”是否与“密码”匹配并给出适当的消息。所以我尝试这样做：

这是 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 - 也没有用。

那么怎么做呢？

谢谢！

6个回答

您的 onChange 事件中的语法可能无效，我避免使用这样的（在 html 中），因为我认为它很乱，而且在最好的时候保持 JavaScript 整洁已经够难的了。

我宁愿在 javascript 中的文档就绪事件上注册该事件。如果您希望在用户键入时进行验证，您肯定也想使用 keyup 事件：

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

这是一个工作示例

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

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

这是一个工作示例

注意：小提琴示例有一个错误：如果您输入密码，然后确认，然后更改原始密码，则不会检查匹配。一个应该在两个控件上放置检查调用。
2021-04-26 19:27:34
+1 加载 jQuery 并避免使用其事件处理功能是没有意义的。
2021-04-30 19:27:34
你必须像这样检查确认传递值..if($(this).val() != $('#txtNewPassword').val().substr(0,$(this).val().length) )..因为如果用户输入密码正确，那么直到最后它显示不匹配
2021-05-02 19:27:34
@musefan 非常感谢！是的，它确实解决了这个问题！
2021-05-20 19:27:34
@sandeep：您不必使用$(this)- 如果您看到我的 JSFiddle 示例，它可以正常工作。此外，不建议this在调用独立函数时使用，因为如果其他东西调用该函数，它将无法正常工作
2021-05-20 19:27:34

这是一个有效的 jsfiddle

http://jsfiddle.net/dbwMY/

注意事项：

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

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

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

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

谢谢！我会检查这个验证，看起来很有趣和有用！
2021-04-21 19:27:34
对我有用 - 3 年前我写的时候做的，现在仍然如此:)
2021-05-07 19:27:34
在原始示例中，它是 type="password"。您的示例使用类型文本。
2021-05-10 19:27:34 
$(function() {
    $("#txtConfirmPassword").keyup(function() {
        var password = $("#txtNewPassword").val();
        $("#divCheckPasswordMatch").html(password == $(this).val()
            ? "Passwords match."
            : "Passwords do not match!"
        );
    });
});​

演示在这里

@Salman 是的，正是关于他们。以前没见过！感谢您的链接！
2021-05-05 19:27:34
@Igal：您是在谈论?:JavaScript 三元运算符吗？
2021-05-06 19:27:34
@Salman 这是一个有趣的方法，我不熟悉它。我在哪里可以阅读更多相关信息？谢谢！
2021-05-13 19:27:34
+1 从 1990 年代后期开始，加载 jQuery 并继续使用内联 JavaScript 是没有意义的:)
2021-05-15 19:27:34 
$('#txtConfirmPassword').keyup(function(){


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



});

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

另外，我不希望使用 inline-javascript，而是使用 jQuery 来捕获事件。

$("#txtConfirmPassword").keyup(checkPasswordMatch);
其它你可能感兴趣的问题
上一篇在 React.js 中，我应该在 componentWillMount 还是 componentDidMount 中发出初始网络请求？ 下一篇facebook javascript API 中的分页如何工作？