Question

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

我已经掌握了代码的大多数方面。但是，我似乎无法使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" />');
        }
    });

Answer 1

您似乎正在删除td。

尝试这样的事情

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

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

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

这样的东西

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

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

Answer 2

只有在确认框丢失焦点时才会触发。如果他们改变了#pass_one的价值而失去了焦点，那就不会再被解雇了。

Answer 3

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

Answer 4

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

正如Jason所指出的那样，您正在使用<td id="pass_status"></td>声明的内容替换原始replaceWith。
另一个问题是您只检测输入确认的密码何时失去焦点。如果他们更改了事件未触发且您的功能未运行的第一个密码框的值。
对于您正在做的事情，使用事件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）的内部而不是元素本身。

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

摆脱#pass_one
如果用户首先键入确认密码，然后输入第一个密码

正确使用.replaceWith（）来创建密码验证程序

4 个答案: