前提・実現したいこと
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
回答2件
あなたの回答
tips
プレビュー