質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

928閲覧

メールフォームのメールアドレスと確認メールアドレスが一致してるかのチェック方法の効率化

bellsmarket

総合スコア62

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/11/02 13:20

編集2018/11/02 13:23

前提・実現したいこと

jQueryでメールフォームのメールアドレスと確認用のメールアドレスが一致しているかチェックしたい
です。
値が一致しているかのチェックは出来たのですが、コードの書き方が効率が悪いように思えます。
3項目全ての処理を書く為、同じような処理を3回書いています。
こういったケースの効率の良い書き方はありますでしょうか?
この長ったらしいコードをうまく減らす方法はありますでしょうか?

またチェックの方法は確認用メールアドレス前後の文字列を
@マークと連結させてメールアドレスと確認用メールアドレスが
一致しているか評価しています。
こういった方法でバリデートしてもセキュリティ上問題ないのでしょうか?

※現在開発してるサイトの一部を抜粋して載せております。

下記の仕様になります。
・確認用のアドレスはコピペを防ぐために@マークの前後を分けている
・入力項目はメールアドレス・確認用メールアドレス前・確認用メールアドレス後ろの3項目
・項目からフォーカスが外れた場合に、3項目すべてに値が入力されていれば、値のチェックを行う
・入力される順番がクライアントに委ねられる為、3項目全てのフォーカスがは外れた時の処理が必要となる

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>メールアドレスチェック</title> 8 <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 9 10</head> 11<body> 12 13 14<form method="POST" action="/confirm/"> 15 16 <div class="block"> 17 <label for="email">メールアドレス</label> 18 <input id="email" type="email" name="email" value="" required> 19 </div> 20 21 <div class="block"> 22 <label for="emailcheckpre">メールアドレス確認</label> 23 <input id="emailcheckpre" type="email" name="emailcheckpre" value="" required> 24 <span>@</span> 25 <input id="emailcheckpost" type="email" name="emailcheckpost" value="" required> 26 </div> 27 28<div class="block"> 29 <button class="button" type="submit" name="submit">入力内容を確認する</button> 30</div> 31</form> 32 33<script> 34 35//============================================================ 36//ここからメールアドレスのフォーカスが外れた場合の処理 37//============================================================ 38 39jQuery("input[name='email']").blur(function(){ 40 console.log('It blurred from element email.'); 41 // メールアドレス・確認用メールアドレス前後の3項目全手に値が入力されたら 42 if(jQuery(this).val() != '' && jQuery("input[name='emailcheckpre']").val() != '' && jQuery("input[name='emailcheckpost']").val() != '') { 43 console.log('All element has a value.'); 44 45 //メールアドレスの前と@マークと後ろを連結する。 46 var emailcheck = jQuery("input[name='emailcheckpre']").val() + '@' +jQuery("input[name='emailcheckpost']").val() 47 48 // メールアドレスと確認用のメールアドレスの値が一致しているかチェック 49 if(emailcheck === jQuery(this).val()) { 50 console.log("The values match"); 51 } else { 52 console.log("The values do not match"); 53 } 54 } else { 55 console.log("The value of any element is insufficient") 56 } 57}) 58 59 60//============================================================ 61//ここから確認用メールアドレス前のフォーカスが外れた場合の処理 62//============================================================ 63 64jQuery("input[name='emailcheckpre']").blur(function(){ 65 console.log('It blurred from element emailcheckpost.'); 66 67 // メールアドレス・確認用メールアドレス前後の3項目全手に値が入力されたら 68 if(jQuery("input[name='email']").val() != '' && jQuery(this).val() != '' && jQuery("input[name='emailcheckpost']").val() != '') { 69 console.log('All element has a value.'); 70 71 //メールアドレスの前と@マークと後ろを連結する。 72 var emailcheck = jQuery("input[name='emailcheckpre']").val() + '@' +jQuery("input[name='emailcheckpost']").val() 73 74 // メールアドレスと確認用のメールアドレスの値が一致しているかチェック 75 if(emailcheck === jQuery("input[name='email']").val()) { 76 console.log("The values match"); 77 } else { 78 console.log("The values do not match"); 79 } 80 } else { 81 console.log("The value of any element is insufficient") 82 } 83}) 84 85//============================================================== 86//ここから確認用メールアドレス後ろのフォーカスが外れた場合の処理 87//============================================================== 88 89jQuery("input[name='emailcheckpost']").blur(function(){ 90 console.log('It blurred from element emailcheckpost.'); 91 92 // メールアドレス・確認用メールアドレス前後の3項目全手に値が入力されたら 93 if(jQuery("input[name='email']").val() != '' && jQuery("input[name='emailcheckpre']").val() != '' && jQuery(this).val() != '') { 94 console.log('All element has a value.'); 95 96 //メールアドレスの前と@マークと後ろを連結する。 97 var emailcheck = jQuery("input[name='emailcheckpre']").val() + '@' +jQuery("input[name='emailcheckpost']").val() 98 99 // メールアドレスと確認用のメールアドレスの値が一致しているかチェック 100 if(emailcheck === jQuery("input[name='email']").val()) { 101 console.log("The values match"); 102 } else { 103 console.log("The values do not match"); 104 } 105 } else { 106 console.log("The value of any element is insufficient") 107 } 108}) 109 110//ここまで確認用メールアドレス後ろのフォーカスが外れた場合の処理 111 112</script> 113</body> 114</html> 115

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

Mac OSX 10.14

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

otn

2018/11/02 13:49

「確認用のアドレスはコピペを防ぐために@マークの前後を分けている」こういうのは、ユーザーに迷惑だからやめて欲しいなあ。
m.ts10806

2018/11/02 21:50 編集

そもそもアドレスを間違いなく登録する手段ってコピペですしね。個人的には確認用アドレスの入力って不要な印象です。入力したものが確認用と合ってても実在のアドレスと合ってなければ意味がない
bellsmarket

2018/11/04 12:48

参考にさせて頂きます。フォームを作成するにあたり「@マークの前後を分けている」を使用しているサイトが多く見受けられたので採用した次第です。
otn

2018/11/04 12:54

タイプミスをしないことを心がける人は自分のメールアドレスはIME辞書に登録して使うものだと思いますよ。そういう人に不親切です。
guest

回答2

0

ベストアンサー

jQuery のセレクターはカンマ区切りが使えますが、

javascript

1jQuery("input[type='email']").blur(function () { 2... 3});

javascript

1jQuery("input[name^='email']").blur(function () { 2... 3});

とかそれぞれのinputタグに専用のクラスを追加しておいて

html

1<input class="mail-check" id="email" type="email" name="email" value="" required> 2 3<input class="mail-check" id="emailcheckpre" type="email" name="emailcheckpre" value="" required> 4 5<input class="mail-check" id="emailcheckpost" type="email" name="emailcheckpost" value="" required> 6

javascript

1jQuery(".mail-check").blur(function () { 2... 3});

としてまとめるほうがさっぱりする気はします。

投稿2018/11/03 00:50

miyasaka

総合スコア271

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bellsmarket

2018/11/04 12:45

正規表現でうまく引っ張ってきたり、クラスでひとまとまりするのですね。 参考にして自分のコードを修正させて頂きます。
guest

0

jQuery のセレクターはカンマ区切りが使えます。何かの処理を加えるにしても name で分岐すれば一回で済みそうです。

js

1jQuery("input[name='email'], input[name='emailcheckpre'], input[name='emailcheckpost']").blur(function () { 2 console.log('It blurred from element ' + $(this).attr('name') + '.'); 3 4 // メールアドレス・確認用メールアドレス前後の3項目全手に値が入力されたら 5 if (jQuery("input[name='email']").val() != '' && jQuery("input[name='emailcheckpre']").val() != '' && jQuery("input[name='emailcheckpost']").val() != '') { 6 console.log('All elements have a value.'); 7 8 // メールアドレスの前と@マークと後ろを連結する。 9 var emailcheck = jQuery("input[name='emailcheckpre']").val() + '@' +jQuery("input[name='emailcheckpost']").val(); 10 11 // メールアドレスと確認用のメールアドレスの値が一致しているかチェック 12 if (emailcheck === jQuery("input[name='email']").val()) { 13 console.log("The values match"); 14 } else { 15 console.log("The values do not match"); 16 } 17 } else { 18 console.log("The value of any element is insufficient") 19 } 20});

投稿2018/11/02 17:58

chitoku

総合スコア1610

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bellsmarket

2018/11/04 12:40

3回繰り返しでメンテナンス性も悪いコードをまとめたいと思っておりましたが、 このコードは目から鱗です。 とても参考なります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問