1

我正在尝试创建一个简单的表单来验证用户输入的第一个密码和第二个密码是否确实相同。如果是这样，我想在密码输入的右侧显示一个图像来确认这一点。

我已经得到了代码的大部分工作。但是，我似乎无法让 replaceWith() 正常工作。如果用户输入第一个密码，输入第二个密码并且两者都相同，则下面的代码将显示正确的图像。但是，如果用户编辑了导致差异的第一个或第二个密码，则 replaceWith() 不会更改图像来表示这一点。

任何对我遗漏或使用不正确的见解都会很棒。

谢谢！

这是HTML：

            echo '<form id="collect" action="add_new_user.php" method="POST" >';
                echo '<table class="sign_up">';

                    // ask to create login
                    echo '<tr><td><h2 class="nl">Login email</h2></td><td><input type="text" name="login_email" id="login_email" class="log" /></td><td><p id="email_status"></p><td></tr>';

                    // ask to create password
                    echo '<tr><td><h2 class="nl">Enter password</h2></td><td><input type="password" name="pass_one" id="pass_one" class="log" /></td></tr>';

                    // ask to confirm password 
                    echo '<tr><td><h2 class="nl">Confirm password</h2></td><td><input type="password" name="pass_confirm" id="pass_confirm" class="log" /></td><td id="pass_status"></td></tr>';

                    echo '<tr><td><input id="register" type="submit" value="Finish registration!" class="begin_mod_button" /></td></tr>';
                echo '</table>';
            echo '</form>';

这是jQuery：

    $('#pass_confirm').focusout(function(login){
        var confirm = $(this).val();
        var pass = $('#pass_one').val();
        if(confirm == pass){
            $('#pass_status').replaceWith('<img src="images/greendot.png" />');
        }
        else{
            $('#pass_status').replaceWith('<img src="images/reddot.png" />');
        }
    });
4

4 回答 4

2

看起来你正在删除td.

尝试这样的事情

.replaceWith('<td><img src="images/greendot.png" /></td>');

此外，当第二个input失去焦点时，您正在调用该函数。因此，对第一个的任何更改都不会注册。

您可以做的一件快速的事情（未经测试）是在input失去焦点时检查状态。就像是

$('#pass_confirm, #pass_one').focusout(function(login){

当然，这意味着即使在输入任何密码确认文本之前，红点也会显示。但一旦完成，它会再次触发。如果用户尝试更改第一个字段，它应该再次触发。

于 2011-08-09T16:48:30.300 回答
0

您的代码目前存在一些问题。

  1. 正如杰森所指出的，您正在用您的声明<td id="pass_status"></td>内容替换原件。replaceWith
  2. 另一个问题是您只检测到用于确认的密码输入何时失去焦点。如果他们更改了第一个密码框的值，则该事件不会触发并且您的函数不会运行。
  3. 对于您正在做的事情，使用事件blur而不是focusout. 后者将检测任何父元素何时失去焦点，虽然在您的场景中不一定会发生这种情况，但最好还是避免不必要的复杂性。

这是修改后的 JS 使其工作：

$('#pass_one').blur(function(){
  $('#pass_confirm').trigger('blur').unbind('blur.confirmation').bind('blur.confirmation', function() {
    $('#pass_status').html($(this).val() === $('#pass_one').val() ? '<img src="images/greendot.png" />' : '<img src="images/reddot.png" />');
  });
});

除了在任一值模糊时检查确认外，它实际上确保在用户输入第二个密码之前不会给用户一个错误。

我使用.html()代替的原因.replaceWith()是因为它替换了我引用的元素的内部 ( #pass_status) 而不是元素本身。

你仍然可以改进我的代码的领域（如果你觉得有点困惑你的大脑）：

  1. 摆脱每次模糊的解除绑定#pass_one
  2. 如果用户先输入确认密码，然后输入第一个密码，则找到一种方法来完成这项工作
于 2011-08-09T17:14:57.670 回答
0

这只会在确认框失去焦点时触发。如果他们改变#pass_one了 's 的价值并且它失去了焦点，这将不会再次被解雇。

于 2011-08-09T16:50:05.383 回答
0

你能.append()代替replaceWith()吗？然后你只需将图像附加到td.$('#pass_status').append('<img src="images/greendot.png" />');

于 2011-08-09T16:53:19.623 回答