すべての入力ボックスに同じコードを繰り返して、エラーを表示します。

Question

私のページにはいくつかの入力ボックスがあります。ここではそのうちの 2 つを紹介します。ユーザーが入力ボックスに数字のみを入力できるように制限したいと考えています。

リーリー

これは、ユーザーが数字のみを入力できるように制限するコードです。

リーリー

入力ボックスごとに上記のコードを繰り返したくありません。クラス名に基づいてすべてのテキストボックスに同じコードを適用し、入力ボックスにすべての数値が入力された場合に別のエラーをポップアップ表示できる、より高速な方法はありますか。クラス名はすべて同じです。

Answer 1

はい、クラス セレクターを使用し、そのクラスの各要素を反復処理することで、コードをリファクタリングして重複を避けることができます。これを実現するためにコードを変更する方法の例を次に示します:

＃＃＃＃＃＃＃＃＃住所（1 ＃＃＃アドレス2

$(ドキュメント).ready(関数() {
    $('#myBtn').click(関数 (イベント) {
        有効 = true にします。

        $('.work').each(関数 (インデックス, 要素) {
            const txtValue = $(要素).val();
            constalertElement = $('alert13');

            if (/^[a-zA-Z0-9] $/i.test(txtValue)) {
                if ((!/^[a-zA-Z] $/i.test(txtValue)) && (/^[0-9] $/i.test(txtValue))) {
                    alertElement.html("入力 # の値は英数字である必要があります" (インデックス 1)).css('color', 'red');
                    有効 = 偽;
                    return false; // ループを終了します
                } それ以外 {
                    アラート要素.html("");
                }
            }
        });

        if (!有効) {
            イベント.preventDefault();
        }
    });
});
この例では、クラス セレクター 

$('.work')

 を使用してクラス work を持つすべての要素を取得し、 each 関数を使用して各要素を反復処理します。また、 valid 変数を使用して検証ステータスを追跡します。入力ボックスに無効なデータが含まれている場合は、valid を false に設定し、ループを終了します。最後に、有効な変数が false の場合、フォームが送信されないようにします。