自定义 jQuery 验证规则以比较表单上的输入字段组

Question

过去几天我一直在寻找答案，但一无所获。我有一个需要 4 名团队成员的注册表 - 每个团队成员必须提供 parent 的电子邮件地址。

这些电子邮件地址必须是唯一的除非参与者的姓氏相同。

例如，如果团队成员 #1 的姓是 Smith，parent 电子邮件是 parent1@example.com - 团队成员 2-4 不能使用相同的电子邮件地址（即 parent1@example.com）除非他们的姓也是史密斯。

这主要是为了考虑到双胞胎或其他同组的兄弟姐妹 parent。快速 Google 搜索出现了自定义验证规则，以确保每个输入都是唯一的。 Link 下面。

http://www.anujgakhar.com/2010/05/24/jquery-validator-plugin-and-notequalto-rule-with-multiple-fields/

这对于确保 parent 电子邮件中的 ALL 必须是唯一的非常有效，但我不知道如何 ALSO 检查姓氏要求。下面是一些代码。

HTML表格。对所有 4 名团队成员重复此操作

<h3>Team Member #1 </h3>

<label>First Name</label>
<input type="text" size="38" class="required" name="firstName_1" id="firstName_1">


<label>Last Name</label>
<input type="text" size="38" class="required team-last-name" name="lastName_1" id="lastName_1">


<label>Parent / Guardian Email Address</label>
<input type="text" size="38" class="required distinctemails" name="parentEmail_1" id="parentEmail_1">


<label>Confirm Parent / Guardian Email Address</label>
<input type="text" size="38" class="required" name="confirmParentEmail_1" id="confirmParentEmail_1">

验证码和自定义规则

jQuery.validator.addMethod("notEqualToGroup", function(value, element, options) {
    // get all the elements passed here with the same class
    var elems = $(element).parents('form').find(options[0]);
    var valueToCompare = value;
    // count
    var matchesFound = 0;
    // loop each element and compare its value with the current value and increase the count every time we find one
    jQuery.each(elems, function(){
        thisVal = $(this).val();
        if(thisVal == valueToCompare){
            matchesFound++;
        }
    });
    // count should be either 0 or 1 max
    if(this.optional(element) || matchesFound <= 1) {
        elems.removeClass('error');
        return true;
    } else {
        elems.addClass('error');
    }
}, jQuery.format("Separate parent email addresses are required for each team member."));

$("#registration_form").validate({
    rules: {
        parentEmail_1: {
            email: true,
            notEqualToGroup: ['.distinctemails']
        }, 
        parentEmail_2: {
            email: true,
            notEqualToGroup: ['.distinctemails']
        }, 
        parentEmail_3: {
            email: true,
            notEqualToGroup: ['.distinctemails']
        }, 
        parentEmail_4: {
            email: true,
            notEqualToGroup: ['.distinctemails']
        }

    },

同样，上述方法非常适合确保每个 parent 电子邮件字段都是唯一的 - 但我不知道如何将这些值与 parent 的姓氏进行比较，并且仅允许 parent 姓氏匹配的相同电子邮件地址。

编辑

看来我的问题有些混乱。如果不清楚，我深表歉意。基本上是这样的：如何使用 jQuery Validate 验证表单，以便 parentEmail 字段对所有四个团队成员都是唯一的 UNLESS parent姓氏AND parent电子邮件匹配？

Answer 1

这不干净，我也不认为它完整。但是，我认为这是一个很好的开始，你可以从这里理解逻辑并改进它。

1) 获取正在验证的相应电子邮件字段的姓氏字段的值...

var nameToCompare = $(element).prevAll('.team-last-name:first').val();

2) 获取循环中每个电子邮件字段的姓氏字段的值...

thisLastName = $(this).prevAll('.team-last-name:first').val();

3) 然后在循环中比较这些 before 检查重复的电子邮件地址...

if (thisLastName !== nameToCompare) {
    if (thisVal === valueToCompare) {
        matchesFound++;
    }
}

4) 将找到的匹配项数量调整为 0 以通过验证，因为现在它忽略了自己（它原本应该）...

if (this.optional(element) || matchesFound === 0) { ....

5) 在自定义方法中执行 not add/remove 类。该插件已经自动处理了这个。 only一个自定义方法的功能目的是returntrue或false对应pass或fail。

演示：http://jsfiddle.net/1op3bzzz/

问题：

时机：您必须在触发时进行处理。您可以在更改字段后以编程方式触发整个表单的验证，但是，所有消息都会出现并且验证将从 "lazy" 更改为 "eager"。自定义方法仅在与电子邮件字段交互时触发。您还可以在与姓氏字段交互时以编程方式触发它。见 the .valid() method.
空白：两个空白的姓氏字段被视为 "matching" 值。使用附加逻辑，您可以将它们过滤掉，除非它们包含值。

自定义 jQuery 验证规则以比较表单上的输入字段组

Custom jQuery Validate rule to compare groups of input fields on forms

jquery

jquery-validate

HTML表格。对所有 4 名团队成员重复此操作

验证码和自定义规则