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

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

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

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

jQuery

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

Q&A

解決済

1回答

276閲覧

正規表現を利用した入力値チェックのコードが分かりません。

taka_oct092018

総合スコア133

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2023/05/25 12:35

実現したいこと

コードの内容が正しく理解出来ているかを教えて欲しいです。

前提

jquery

1$(this).val() != $("input[name="+$(this).attr("name").replace(/^(.+)_check$/, "$1")+"]").val()

上記のコードの内容が正しく理解出来ているか自信がないので教えて頂けないでしょうか。

Web制作の現場で使うjQueryデザイン入門[改訂新版]_サンプルコード_P236より

私の解釈は以下の通りです。
(a) 「!=」の左辺「$(this).val()」は、
<input type="text" value="" size="80" name="mail_check" class="validate mail mail_check">」で
入力された値。

(b) 「!=」の右辺「$("input[name="+$(this).attr("name").replace(/^(.+)_check$/, "$1")+"]")」は、
<input type="text" value="" size="80" name="mail" class="validate mail">
」で入力された値。

(a)と(b)の値が一致しない場合に
「$(this).parent().prepend("<p class='error'>メールアドレスと内容が異なります</p>");」が実行される。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample1</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $(function(){ $("form").submit(function(){ //エラーの初期化 $("p.error").remove(); $("dl dd").removeClass("error"); $("input[type='text'].validate,textarea.validate").each(function(){ //必須項目のチェック if($(this).hasClass("required")){ if($(this).val()==""){ $(this).parent().prepend("<p class='error'>必須項目です</p>"); } } //数値のチェック if($(this).hasClass("number")){ if(isNaN($(this).val())){ $(this).parent().prepend("<p class='error'>数値のみ入力可能です</p>"); } } //メールアドレスのチェック if($(this).hasClass("mail")){ if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){ $(this).parent().prepend("<p class='error'>メールアドレスの形式が異なります</p>"); } } // 疑問の箇所 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //メールアドレス確認のチェック if($(this).hasClass("mail_check")){ if($(this).val() && $(this).val()!=$("input[name="+$(this).attr("name").replace(/^(.+)_check$/, "$1")+"]").val()){ $(this).parent().prepend("<p class='error'>メールアドレスと内容が異なります</p>"); } } }); //ラジオボタンのチェック $("input[type='radio'].validate.required").each(function(){ if($("input[name="+$(this).attr("name")+"]:checked").length == 0){ $(this).parent().prepend("<p class='error'>選択してください</p>"); } }); //チェックボックスのチェック $(".checkboxRequired").each(function(){ if($(":checked",this).length==0){ $(this).prepend("<p class='error'>選択してください</p>"); } }); // その他項目のチェック $(".validate.add_text").each(function(){ if($(this).prop("checked") && $("input[name="+$(this).attr("name").replace(/^(.+)$/, "$1_text")+"]").val()==""){ $(this).parent().prepend("<p class='error'>その他の項目を入力してください。</p>"); } }); //エラーの際の処理 if($("p.error").length > 0){ $('html,body').animate({ scrollTop: $("p.error:first").offset().top-40 }, 'slow'); $("p.error").parent().addClass("error"); return false; } }); }); </script> <style> #container{ width:600px; margin:0 auto; padding:20px; background:white; } h1{ margin-top:20px; font-size:large; color:#7CADB6; } dl dt { border-left:5px solid #7CADB6; border-bottom:1px solid #7CADB6; font-size:small; margin:0; padding:5px; } dl dt span{ color:red; font-weight:bold; } dl dd{ font-size:small; margin:0; padding:10px; } dl dd input{ position:relative; z-index:2; } dl dd label{ position:relative; padding:5px 5px 5px 25px; margin : 0 5px 0 -25px; margin-left:-25px; position:relative; z-index:1; } dl dd.error input , dl dd.error textarea , dl dd.error label { background:#FFCCCC; } * html dl dd.error label { background:none; } *+html dl dd.error label{ background:none; } dl dd p.error{ margin:0; color:red; font-weight:bold; margin-bottom:1em; } </style> </head> <body style="background:darkgray"> <div id="container"> <h1>当サイトへのお問い合わせ</h1> <form action="complete.html" method="post"> <dl> <dt>お名前<span>※</span></dt> <dd><input type="text" name="name" size="80" class="validate required"></dd> <dt>フリガナ</dt> <dd><input type="text" name="furi" size="80"></dd> <dt>郵便番号</dt> <dd><input type="text" name="zip1" size="4" maxlength="4" class="validate number"> - <input type="text" name="zip2" size="3" maxlength="3" class="validate number"></dd> <dt>メールアドレス</dt> <dd><input type="text" value="" size="80" name="mail" class="validate mail"></dd> <dt>メールアドレス(確認)</dt> <dd><input type="text" value="" size="80" name="mail_check" class="validate mail mail_check"></dd> <dt>性別<span>※</span></dt> <dd> <input type="radio" value="男性" name="gender" id="man" class="validate required"> <label for="man">男性</label> <input type="radio" value="女性" name="gender" id="woman"><label for="woman">女性</label> </dd> <dt>どこでこのサイトを知りましたか?<span>※</span></dt> <dd class="checkboxRequired"> <input type="checkbox" name="search" id="search" value="検索エンジン"> <label for="search">検索エンジン</label> <input type="checkbox" name="friend" id="friend" value="知人の紹介"> <label for="friend">知人の紹介</label> <input type="checkbox" name="mail_magazine" id="mail_magazine" value="メルマガ"> <label for="mail_magazine">メルマガ</label> <input type="checkbox" name="etc" value="その他" id="etc" class="validate add_text"> <label for="etc">その他</label> <input type="text" name="etc_text" value=""> </dd> <dt>お問い合わせ内容<span>※</span></dt> <dd> <textarea id="inquiry" name="inquiry"rows="10" cols="60"class="validate required"></textarea> </dd> </dl> <p><input type="submit" value="送信"></p> </form> </div> </body> </html>

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

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

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

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

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

guest

回答1

0

ベストアンサー

合ってます。

直前に hasClass("mail_check") のチェックがあるのだから、「mail_check から _check を抜いたname」のような処理をせずに name=mail を直接書いてもいいんじゃないのか、という気もします。

投稿2023/05/25 22:52

int32_t

総合スコア20884

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

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

taka_oct092018

2023/05/26 12:47

int32_t様 いつも回答ありがとうございます。 そうですね、この入門書のサンプルコードはちょっと冗長な感じがしますね。 ところで、私の解釈は正解だったでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問