如何实时比较 2 个表单输入答案

【问题标题】：how to compare 2 form inputs live如何实时比较 2 个表单输入
【发布时间】：2014-11-12 22:10:41
【问题描述】：

我正在尝试比较两个表单输入“密码”和重新输入密码“以确保相同。我通过将密码发送到一个单独的 PHP 来验证密码，该 PHP 回显结果（效果很好）

<script type="text/javascript">
  $(document).ready(function() {
    $('#password_feedback').load('password-check.php').show();

    $('#password_input').keyup(function() {

      $.post('password-check.php', {
          password: form.password.value
        },
        function(result) {
          $('#password_feedback').html(result).show();
        });

    });
  });
</script>

我尝试将密码和重新输入=密码发送到 PHP 进行比较，但没有运气。我可以将两者与每个 keyup 进行比较吗？

【问题讨论】：

能否提供HTML代码？
你为什么不在 javascript 中进行比较，而是将其发送到服务器？
您真的不想对每个按键都执行此操作 - 如果密码超过 32 个字符怎么办？您应该使用blur() 或其他一些函数。

标签： javascript php forms validation

【解决方案1】：

您在 PHP 脚本中检查什么？有什么特别的理由可以证明使用 PHP 的合理性？

你可以只用 JS 做到这一点，你不需要 AJAX 部分。

HTML：

<input type="password" id="password">
<input type="password" id="password_cf">    
<div class="result"></div>

JS（jQuery）：

$('#password_cf').on('keyup', function(){     

    if($('#password_cf').val()== $('#password').val())
        $('.result').html('They match');
    else
        $('.result').html('They do not match');
});

小提琴：http://jsfiddle.net/2sapjxnu/

如果您只想在该字段上失去焦点时进行检查，则可以使用blur 事件。与验证每个键相比，它的“响应性”稍差，但我猜性能更高。

【讨论】：

如果密码很长，那么检查每个 keyup 似乎是不必要的昂贵，特别是如果您只想知道它们是否匹配。我可以看到使用 keyup 作为密码强度计。
我同意，我现在在答案末尾添加了对blur 事件的提及。我只是使用了keyupevent，因为这是他以前使用的。

【解决方案2】：

不需要jQuery，添加函数：

function checkPass(input) {
    if (input.value != document.getElementById('re-enter-password').value) {
        input.setCustomValidity('Passwords should match.');
    } else {
        input.setCustomValidity('');
    }
}

将此添加到您的重新输入密码中：oninput="checkPass(this)"

或只需在要进行比较的部分调用此函数即可：

function checkPass() {
    var input = document.getElementById('password');

    if (input.value != document.getElementById('re-enter-password').value) {
        input.setCustomValidity('Passwords should match.');
    } else {
        input.setCustomValidity('');
    }
}

【讨论】：

【解决方案3】：

如何为每个输入添加一个类，然后：

if($(".password").val() == $(".re-enter-password").val()){
    alert("it matches")
} else {
    alert("no match yet");
}

【讨论】：

【解决方案4】：

Quick and dirty -

鉴于此标记 -

<input type="password" name="pw1" />
<input type="password" name="pw2" />

您可以使用这样的代码在客户端检查它，而无需多次往返服务器 -

$('[name="pw2"]').blur(function() {
    var pw1 = $('[name="pw1"]').val();
    var pw2 = $('[name="pw2"]').val();
    if(pw2 != pw1) {
        alert('passwords do not match');
    }
});

【讨论】：

【解决方案5】：

通过将 2 个表单输入字段与 JavaScript 发送到服务器以获得断言响应来匹配 2 个表单输入字段可能会导致糟糕的用户体验，因为如果您在每个按键上都这样做，那么它会产生不必要的互联网流量 - 而用户正在等待。

那么，为什么不直接用 JavaScript 匹配这两个字段呢？如果您也在服务器上使用特定的正则表达式进行验证检查，您可以让服务器将该正则表达式“模式”放在 HTML 字段中 - （不需要 JavaScrpt）。然后，在 onkeyup 事件中，您可以简单地执行以下操作：

form.field2.onkeyup = function()
{
    if (form.field1.value !== form.field2.value)
    {
      /* some code to highlight the 2 fields,
         or show some message, or speech bubble */
      return;
    }
}

form.field1.onkeyup = form.field2.onkeyup;

【讨论】：