Jquery验证确认密码

jquery validate confirm password

本文关键字：密码 确认 验证 Jquery      更新时间：2023-09-26

我使用http://bassistance.de/jquery-plugins/jquery-plugin-validation/来验证一个允许用户更改其现有设置的表单。表单有一个密码字段和一个确认密码的字段。为了保持密码不变，我指示用户将其留空(可能有更直观的方法?)，并且只有在用户更改密码时才显示确认密码字段。

它工作得很好，但是有两个问题。首先，如果你在密码字段中输入一些东西并按tab键，你不会进入确认密码字段，而是进入下一个字段。其次，如果您在密码字段中输入一些内容并按enter键，则在检查确认密码之前提交表单。由于某种原因，第二个缺陷在使用jsfiddle演示http://jsfiddle.net/4htKu/2/时没有表现出来，但在第二个相同的演示http://tapmeister.com/test/validatePassword.html上却表现出来了。下面的代码与前面提到的两个演示相同。我认为问题与confirm_password密码被隐藏有关，但我不确定。我需要做些什么来解决这两个问题?谢谢你

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>jQuery validation plug-in - main demo</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                $("#confirm_password").parent().hide();
                $("#password").val('').
                blur(function() {
                    $t=$(this);
                    if($.trim($t.val())!="" && !$t.hasClass('error')) {$("#confirm_password").parent().show();}
                    else if($.trim($t.val())=="") {$("#confirm_password").val('').parent().hide();}
                });
                // validate signup form on keyup and submit
                $("#signupForm").validate({
                    rules: {
                        firstname: {required: true,minlength: 2},
                        lastname: {required: true,minlength: 2},
                        username: {required: true,minlength: 2},
                        password: {required: true,minlength: 2},
                        confirm_password: {required: true,minlength: 2, equalTo: "#password"}
                    },
                    messages: {},
                    submitHandler: function(form) {alert("submitted");}
                });
            });
        </script>
    </head>
    <body>
        <form class="cmxform" id="signupForm" method="get" action="">
            <fieldset>
                <legend>Validating a complete form</legend>
                <p>
                    <label for="firstname">Firstname*</label>
                    <input id="firstname" name="firstname" />
                </p>
                <p>
                    <label for="lastname">Lastname*</label>
                    <input id="lastname" name="lastname" />
                </p>
                <p>
                    <label for="username">Username*</label>
                    <input id="username" name="username" />
                </p>
                <p>
                    <label for="password">Password (Leave blank to remain unchanged)</label>
                    <input id="password" name="password" type="password" />
                </p>
                <p>
                    <label for="confirm_password">Confirm password</label>
                    <input id="confirm_password" name="confirm_password" type="password" />
                </p>
                <p>
                    <label for="other">Other Non-required</label>
                    <input id="other" name="other" />
                </p>
                <p>
                    <input class="submit" type="submit" value="Submit" />
                </p>
            </fieldset>
        </form>
    </body>
</html>

不使用.blur，而是使用.keydown和settimeout来检测值是否为空。如果它不是空的，显示它，否则隐藏它。

$("#password").keydown(function() {
    var self = this, $self = $(this);
    setTimeout(function(){
        if ( $.trim(self.value) != "" && !$self.is(".error") ) {
            $("#confirm_password").parent().show();
            return;
        }
        $("#confirm_password").val('').parent().hide();
    },0);
});

就按回车键而言，这不是应该做的吗?提交表格?

使用.blur不起作用的原因是您在显示隐藏字段之前选择下一个字段。下面的代码修复了这个问题。

为什么不用复选框询问用户是否想更改密码呢?如果选中，则显示密码字段，如果不允许提交表单。

其他HTML: 

<p>
    <label for="passwordChangeYes">Check if you want to change your password</label>
    <input type="checkbox" name="passwordChangeYes" id="passwordChangeYes" value="Yes" />
</p>

额外JS: 

$("#password").hide();
$('#passwordChangeYes').one("click", function () {
    if ($('#passwordChangeYes').is(':checked')) {
            $("#password").fadeIn(400);
        }
    });

我不确定如何从复选框单击上的验证部分删除或添加所需的部分。但也许这是一个起点?

相关文章：