使用 JQuery 比较输入字段答案

【问题标题】：Comparing input fields using JQuery使用 JQuery 比较输入字段
【发布时间】：2011-03-25 21:08:33
【问题描述】：

我目前有一个输入表单。每个输入类有两个条目，如下所示：

<form>
    <input type="text" name="firstname_a" class="firstname" disabled="disabled" />
    <input type="text" name="firstname_b" class="firstname" />
    <input type="text" name="surname_a" class="surname" disabled="disabled" />
    <input type="text" name="surname_b" class="surname" />
    <input type="submit" value="submit" />
</form>

在提交时，我希望 JQuery 检查值 a 是否与值 b 匹配（值 a 已由最终用户输入，值 b 已由为审核公司工作的外包人员输入）。该表格最多可以有 470 个输入字段，这些字段存储在数据库中，具体取决于正在执行的审查类型。因此，我不想输入 470 次！：

if($('input["name=firstname_a"]').val() == $('input["name=firstname_a"]').val())
{
  // do something
}
else
{
  // do something else
}

我想找到一种动态的方法来做到这一点，可能使用 serializeArray() 函数，但我很挣扎！我们将不胜感激所有或任何帮助。

【问题讨论】：

标签： jquery

【解决方案1】：

您可以循环查看以_a 结尾的.each 输入，并与对应的_b 进行比较：

$('#target').submit( function() {

    // Iterate over each input with name ending in _a
    $('input[name$="_a"]').each( function() {

        // Get the base name by removing _a
        var name = $(this).attr('name').replace(/_a$/, '');

        // Compare _a to _b
        if( $('input[name="'+name+'_a"]').val() != $('input[name="'+name+'_b"]').val()) {
             alert(name+" field does not match!");   
        }
    });

    return false;
});

例子：

http://jsfiddle.net/jtbowden/yqMGG/

这是一个保存所有不匹配并在最后发出警报的版本：

http://jsfiddle.net/jtbowden/amsJj/

或突出显示错误的版本：

http://jsfiddle.net/jtbowden/V8xJX/

【讨论】：

太棒了！谢谢你的例子。该代码实际上比我提出的问题稍微复杂一些，但已设法调整您的建议以适应。节省了我盯着屏幕看的时间，再次感谢！

【解决方案2】：

我会在以_a 结尾的集合匹配名称上使用each，然后找到相应的_b 并检查它们的值。在外部范围内设置一个变量来跟踪是否发现了任何无效输入。

var valid = true;
$('input[name$="_a"]').each( function() {
    var $a = $(this);
    var bName = $a.attr('name').replace(/_a/,'_b');
    var $b = $('input#' + bName);
    if ($a.val() != $b.val()) {
        // add a validation message for b?
        valid = false;
        // return false; // only if you want to stop after the first one
    }
});

return valid;

【讨论】：

【解决方案3】：

您可以使用选择器$= 的结尾并迭代列表，假设它们的顺序相同并且_a 值总是有一个_b 值：

var aSet = $('input[name$="_a"]'),
    bSet = $('input[name$="_b"]'),
    al = aSet.length;

for (var i = 0; i < al; i++) {
  if (aSet.eq(i).val() == bSet.eq(i).val()) {
    // do something
  } else {
    // do something else
  }
}

【讨论】：

【解决方案4】：

您是否尝试同时评估所有元素？如果是这样，这属于表单提交后的服务器端。如果您在每个字段模糊后都想这样做，那么

<input type="hidden" name="firstname_a" class="firstname"  />
<input type="text" name="firstname_b" class="firstname eval" rel="#firstname_b"/>
$('.eval').live('blur',function(){
   if($(this).val()==$($(this).attr('rel')).val()){
    ...
  }else{
    ...
  }
});

如果你真的想在提交时这样做

$('.eval').each(function(){
       if($(this).val()==$($(this).attr('rel')).val()){
        ...
      }else{
        ...
      }
    });

【讨论】：