jquery - すべての入力フィールドが異なるかどうかを確認する jQuery のエレガントな方法

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

デモ

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