JavaScript

フォームのメールアドレスが一致しているか確認する方法【jQuery】

フォームによくある「メールアドレス」、「メールアドレス確認」をjQueryを使用してチェックします。
では早速やっていきます!

jQueryでフォームのメールアドレスが一致しているか確認する方法

まずは、HTMLを書いていく〜。

メールアドレス入力欄を作る

inputで入力欄を作って、「内容を確認する」を押した際に、チェックを行うように「onClick」を設定しておきます。

<form>
<input class="color-gray" id="mail01" type="email" name="email1" required>
<input class="color-gray" id="mail02" type="email" name="email2" required>
 
<input type="submit" value="内容を確認する" onClick="return CheckMail()">
</form>

 

jQueryでvalue値の確認

事前に「input」にidを振っておき、jQueryでvalue値を取得します。
中の値が一致していれば、確認ページへ移動し、一致しない場合は、ウィンドウで「メールアドレスが一致しません。」と表示させます。

function CheckMail() {
    // 入力値取得
    var input1 = $("#mail01").val();
    var input2 = $("#mail02").val();
    // メール比較
    if (input1 !== input2) {
        window.alert("メールアドレスが一致しません。");
        return false;
    } else {
        return true;
    }
}

 

 
完成!

 

フォームのチェックボックスを必須にする方法も紹介しています。
フォームのチェックボックスを必須化!1つ以上チェックがないと送信できないようにする方法

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)