Question

我有一个包含十几个电子邮件输入字段的表单，每封电子邮件都必须是唯一的。通过jquery在所有字段之间执行比较的最优雅方式是什么，而无需手动编写如下所有比较：

if($("#email1").val() == $("#email2").val() || ....)  {
    isValid = false;
    alert("emails must be unique.");
}

提前致谢！

Answer 1

最简单的方法是将电子邮件放入Set，并比较其大小：

const $inputs = $('input[id^=email]');

const uniques = new Set($input.map((i, el) => el.value).get());

if (uniques.size < $inputs.length) {
    alert('Emails must be unique.');
}

如果您不能使用ES6（或其他现代JS功能），请使用jQuery的inArray：

var values = [];

$('input[id^=email]').each(function () {
    if ($.inArray(this.value, values) >= 0) {
        alert('Emails must be unique.');

        return false; // <-- stops the loop
    }

    values.push(this.value);
});

如果该选择器过于宽泛，您可以在逗号分隔的列表中指定您的ID，如下所示：

$('#email1, #email2, #email3') // ...and so on

或者只是为要选择的所有元素添加一个类......

Answer 2

var duplicate=false;

$('input[id^=email]').each(function(){
    var $this = $(this);
    if ($this.val()===''){ return;}
    $('input[id^=email]').not($this).each(function(){
        if ( $(this).val()==$this.val()) {duplicate=true;}
    });
});

if(duplicate) alert('email must be valid');

DEMO

Answer 3

尝试将unique添加到您想要唯一的所有类中，将其值添加到数组中，然后检查该数组是否只包含唯一值。

<input type="text" class="unique" id="email1" />
<input type="text" class="unique" id="email2" />

然后使用jQuery：

var values = $('input.unique').map(function(){
    return $(this).val();
}).get();

然后检查数组是否是唯一的：

var uniqueValues = $.grep(values, function (v, k) {
    return $.inArray(v, values) === k;
});

if(uniqueValues.length !== values.length){
    alert('emails must be unique.');
}

Answer 4

如果你不需要完全 12封电子邮件，你可以使用this聪明的普通JS片段来删除重复的内容。

jQuery Elegant Way查看所有输入字段是否不同

4 个答案: