Javascript jquery验证确认密码_Javascript_Jquery_Jquery Validate

Javascript jquery验证确认密码

javascript jquery

Javascript jquery验证确认密码,javascript,jquery,jquery-validate,Javascript,Jquery,Jquery Validate,我正在使用验证一个表单，该表单将允许用户更改其现有设置。该表单有一个用于输入密码的字段以及一个用于确认密码的字段。要保持密码不变，我会指示用户将其保留为空（可能是更直观的方法吗？），并且仅当用户更改其密码时才会显示确认密码字段它工作得很好，但有两个问题。首先，如果在密码字段中输入内容并按tab键，则不会转到确认密码字段，而是转到其后的下一个字段。其次，如果您在密码字段中输入一些内容并按enter键，则在检查确认密码之前提交表单。出于某种原因，第二个缺陷没有在使用JSFIDLE演示时表现出来，但

我正在使用验证一个表单，该表单将允许用户更改其现有设置。该表单有一个用于输入密码的字段以及一个用于确认密码的字段。要保持密码不变，我会指示用户将其保留为空（可能是更直观的方法吗？），并且仅当用户更改其密码时才会显示确认密码字段

它工作得很好，但有两个问题。首先，如果在密码字段中输入内容并按tab键，则不会转到确认密码字段，而是转到其后的下一个字段。其次，如果您在密码字段中输入一些内容并按enter键，则在检查确认密码之前提交表单。出于某种原因，第二个缺陷没有在使用JSFIDLE演示时表现出来，但在第二个相同的演示中表现出来。下面的代码与前面提到的两个演示相同。我相信问题与确认密码被隐藏有关，但我不确定。我需要做什么来解决这两个问题？多谢各位

<!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>


jQuery验证插件-主演示
$（函数（）{
$（“#确认#密码”）.parent（）.hide（）；
$（“#密码”）.val（“”）。
模糊（函数（）{
$t=$（此项）；
如果（$.trim（$t.val（））！=“”&&&（$t.hasClass（'error'））{$（“#确认#密码”）.parent（）.show（）}
如果（$.trim（$t.val（））==“”）{$（“#确认_密码”）.val（“”）.parent（）.hide（）}
});
//在键盘上验证注册表格并提交
$（“#注册表”）.validate({
规则：{
名字：{required:true，minlength:2}，
lastname:{必需：true，minlength:2}，
用户名：{required:true，minlength:2}，
密码：{required:true，minlength:2}，
确认密码：{required:true，minlength:2，equalTo:#password}
},
消息：{}，
submitHandler:函数（表单）{alert（“submitted”）；}
});
});
验证完整表单

名字*


姓氏*


用户名*


密码（保留为空以保持不变）


确认密码


其他非必需的

不要使用

.blur

，而是使用

.keydown

和

设置超时

来检测值是否为空。如果不是空的，显示它，否则隐藏它

$("#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

不起作用的原因是，在显示隐藏字段之前，您要切换到下一个字段。此代码修复了该问题。

使用

.blur

，而不是使用

.keydown

和

设置超时来检测该值是否为空。如果不是空的，显示它，否则隐藏它
$("#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>

我不确定如何从复选框上的验证部分删除或添加所需的部分。但也许这是一个起点？
为什么不通过复选框询问用户是否要更改密码？如果选中，则显示密码字段，如果不允许提交表单
其他HTML：
<p>
    <label for="passwordChangeYes">Check if you want to change your password</label>
    <input type="checkbox" name="passwordChangeYes" id="passwordChangeYes" value="Yes" />
</p>

我不确定如何从复选框上的验证部分删除或添加所需的部分。但这也许是一个起点？
从可用性角度看，要控制选项卡上的元素，我建议将确认视图从onBlur更改为onKeypress。每次按“通过”字段中的键后，检查是否存在某些内容，如果存在，则显示“确认”，否则隐藏“确认”。@Syon。看来你和凯文同意了。我将测试并发布结果。谢谢你的评论。@Liam，我知道（或者曾经知道：）关于tabindex，但已经有一段时间没用了。我确实需要调查一些事情，但我认为它可能必须处理在按下up tab时不可见的输入。从可用性角度看，要控制在tab上点击的元素，我建议将confirm的视图从onBlur更改为onKeypress。每次按“通过”字段中的键后，检查是否存在某些内容，如果存在，则显示“确认”，否则隐藏“确认”。@Syon。看来你和凯文同意了。我将测试并发布结果。谢谢你的评论。@Liam，我知道（或者曾经知道：）关于tabindex，但已经有一段时间没用了。一些我确实需要调查的事情，但我认为它可能必须处理在按下up tab时不可见的输入Hanks Kevin，我会尝试。按键向下。至于按enter键，它会在用户有机会输入确认密码之前提交表单。我认为（希望）您的解决方案也可以修复它，因为它使确认密码输入可见，因此将被验证@