jquery - jQuery优雅的方式查看所有输入字段是否不同

Question

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

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

提前致谢！

Answer 1

最简单的方法是将电子邮件放入 aSet中，然后比较其大小：

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');

演示

Answer 3

尝试将 a 添加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.');
}