jqueryを使用してメール検証を実装する-フロントエンドQ&A-php.cn

jqueryを使用してメール検証を実装する

PHPz

リリース： 2023-05-28 11:23:07

オリジナル

1832 人が閲覧しました

今日のデジタルとネットワークの時代において、電子メールは私たちの日常生活に欠かせないものになっています。したがって、電子メール検証 (電子メール検証) の実装は、Web アプリケーションを作成する開発者にとって必要なスキルとなっています。この記事ではjQueryを使ったメール認証の実装方法を紹介します。

前提知識

jQuery を使用して電子メール検証を実装する方法について説明する前に、電子メールアドレスに関するいくつかの一般的なルールを知っておく必要があります。電子メールアドレスには、「@」記号で区切られたユーザー名とドメイン名の 2 つの主要な部分があります。ユーザー名には文字、数字、ドット (.)、アンダースコア (_) を含めることができ、文字または数字で始めることはできますが、ドットやアンダースコアで始めることはできません。ドメイン名にはピリオドを含める必要があり、最後の部分は 2 ～ 6 文字の英数字コード (.com や .cn など) である必要があります。

要件分析

コードを書き始める前に、ニーズと目標を明確にする必要があります。この場合、次の側面を実装する必要があります:

(1) ユーザーが電子メールアドレスを入力するとき、上記のルールに従って検証される必要があります。

(2) ユーザーがフォームを送信する前に、電子メールアドレスが有効であることを確認する必要があります。

(3) メールアドレスが無効な場合は、エラーメッセージを表示する必要があります。

コードの記述

ここで、コードの記述を開始できます。まず、HTML コードで入力ボックスを作成し、検証する電子メールアドレス入力ボックスとして識別するためのクラスをそれに追加する必要があります。

<label for="email">电子邮件地址：</label>
<input type="text" name="email" id="email" class="email-input">
<span class="email-error">请输入一个有效的电子邮件地址。</span>

ログイン後にコピー

上記のコードでは、「label」を使用します。要素を使用して入力ボックスにラベルを付け、それを「input」要素に関連付けます。また、後で jQuery コード内で参照できるように、クラス名「email-input」を入力ボックスに追加しました。エラーメッセージボックスの HTML コードは次のとおりです。

<span class="email-error">请输入一个有效的电子邮件地址。</span>

ログイン後にコピー

上記のコードでは、「span」要素を使用してエラーメッセージボックスを定義し、それをクラス名「email-error」に関連付けます。」。デフォルトでは、エラーメッセージボックスは非表示になります (表示:なし)。

これで、jQuery コードの作成を開始できます。コードを検証関数と検証トリガー関数の 2 つの部分に分割します。

3.1 検証関数

電子メールアドレスを検証するには、「validateEmail」という関数を作成する必要があります。この関数では、正規表現を使用して、電子メールアドレスが上記のルールに一致するかどうかを確認します。

function validateEmail(email) {
    var re = /^[w-.]+@([w-]+.)+[w-]{2,6}$/;
    return re.test(email);
}

ログイン後にコピー

上記のコードでは、正規表現 "/^[w-.] @([w - ] .) [w-]{2,6}$/" を使用して電子メールアドレスを確認します。正規表現には次の部分が含まれます。

(1)^: 文字列が正規表現の先頭部分で始まる必要があることを示します。

(2)[w-.]: 電子メールアドレスのユーザー名部分を表します。文字、数字、ピリオド、アンダースコアが含まれます。正規表現ではドットは特別な意味を持つため、前にバックスラッシュを付けてエスケープする必要があります。

(3)@: 電子メールアドレスのユーザー名とドメイン名の間の区切り文字を表します。

(4)([w-] .): メールアドレスのドメイン名部分を示します。文字、数字、ハイフン、ピリオドの連続した組み合わせが 1 つ以上含まれます。「」記号は括弧の外側にあるため、少なくとも 1 つの組み合わせが一致する必要があります。

(5)[w-]{2,6}: 電子メールアドレスの最後の部分を表します (トップレベルドメイン名または TLD とも呼ばれます)。 2 ～ 6 個の文字または数字の組み合わせである必要があります。国によって使用される TLD が異なるため、ここでは範囲 {2,6} が使用されます。

(6)$: 文字列が正規表現の末尾部分で終わる必要があることを示します。

電子メールアドレスを validateEmail 関数に渡すと、この関数は正規表現を実行し、アドレスが有効かどうかを示す true または false を返します。

3.2 検証トリガー関数

次に、電子メールアドレスを検証し、必要に応じてエラーメッセージボックスを表示または非表示にする「validateEmailField」という関数を作成する必要があります。

function validateEmailField() {
    var emailInput = $('#email');
    var emailError = $('.email-error');
    if (validateEmail(emailInput.val())) {
        emailError.hide();
    } else {
        emailError.show();
    }
}

ログイン後にコピー

上記のコードでは、まず jQuery セレクターを使用して入力ボックスとエラーメッセージボックスを取得します。次に、「validateEmail」関数を呼び出して、電子メールアドレスが有効かどうかを確認します。電子メールアドレスが有効な場合、エラーメッセージボックスは非表示になります。それ以外の場合は、このメッセージボックスを表示します。

ここで、ユーザーが電子メールアドレスを入力したときに自動的に検証をトリガーするために、入力ボックスにリスナーを追加する必要もあります。

$('.email-input').on('keyup', function() {
    validateEmailField();
});

ログイン後にコピー

上記のコードでは、jQuery リスナーを使用して監視します。ユーザーが入力ボックスにキーを入力し、「validateEmailField」関数を呼び出して、入力された電子メールアドレスを検証します。

最後に、フォームが送信される前にすべての入力フィールドを検証したい場合は、次のコードを追加できます:

$('form').submit(function() {
    var emailInput = $('#email');
    var emailError = $('.email-error');
    if (!validateEmail(emailInput.val())) {
        emailError.show();
        return false;
    }
    return true;
});

ログイン後にコピー

上記のコードでは、フォームの送信を監視するリスナーを追加しました。イベントを確認してから、電子メールアドレスが有効かどうかを確認します。電子メールアドレスが無効な場合は、エラーメッセージボックスを表示し、false を返してフォームの送信を防ぎます。それ以外の場合、フォームは送信されます。

結論

この記事では、jQuery を使用してメールアドレス検証を実装する方法を説明しました。正規表現を使用して電子メールアドレスの形式を検証し、検証プロセスを完了するために 2 つの JavaScript 関数を作成しました。最後に、電子メールアドレス検証を Web フォームに統合して、ユーザー入力の有効性を確認する方法も示しました。これらのテクニックは多くの Web アプリケーションで非常に役立つため、Web 開発スキルを向上させるためにマスターすることをお勧めします。

以上がjqueryを使用してメール検証を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。