jquery - 多个不相等输入的jQuery验证

Question

我设法在我的表单上设置了 jQuery 验证插件，并为两个字段的值不匹配的字段提供了规则。具体来说， email 和 email_2 输入现在不能相同，并且有效。但我真正需要的是以相同的方式验证多个输入（在本例中为 4 个）。我有 email、email_2、email_3、email_4，它们都不应该相等。您可以在我的jsfiddle here中看到它，如果您有解决方案，您可以更新它并将其放回答案中：

html:

<form id="signupform" method="post">
<input id="email" name="username" />
<br/ >
<input id="email_2" name="email_2" />
<br />
<input id="email_3" name="email_3" />
<br />
<input id="email_4" name="email_4" />
<br />
<input id="submit" type="submit" value="submit" />   
</form>

jQuery：

$.validator.addMethod("notequal", function(value, element) {
 return $('#email').val() != $('#email_2').val()}, 
 "* You've entered this one already");

// validate form    
$("#signupform").validate({

rules: {
    email: {
        required: true,
        notequal: true
    },
    email_2: {
        required: true,
        notequal: true
    },
},
});

验证所有输入的最佳解决方案是什么？

Answer 1

是的，它仍然适用于 1.10.1

演示

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

HTML

<form id="signupform" method="post">
    <p>
        <input class="distinctemails" id="email" name="username" /></p>
    <p>
        <input class="distinctemails" id="email_2" name="email_2" /></p>
    <p>
        <input class="distinctemails" id="email_3" name="email_3" /></p>
    <p>
        <input class="distinctemails" id="email_4" name="email_4" /></p>
    <p>
        <input id="submit" type="submit" value="submit" />
    </p>
</form>

jQuery

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]);
    // the value of the current element
    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("Please enter a Unique Value."))

// validate form    
$("#signupform").validate({

    rules: {
        email: {
            required: true,
            notEqualToGroup: ['.distinctemails']
        },
        email_2: {
            required: true,
            notEqualToGroup: ['.distinctemails']
        },
        email_3: {
            required: true,
            notEqualToGroup: ['.distinctemails']
        },
        email_4: {
            required: true,
            notEqualToGroup: ['.distinctemails']
        },
    },
});

Answer 2

您可以使用 $.unique()：

uniqArray = $.unique(emailsArray);
if (uniqArray.length != emailsArray.length) {
    <your magic here>
}

Answer 3

uniqArray = emailsArray.slice();

$.unique(uniqArray);

if (uniqArray.length != emailsArray.length) {
    <your magic here>
}