プログラミング学習の記録 348 『初めてのJavaScript 第2版』(シェリー・パワーズ著、武舎広幸+武舎るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84311-425-5)の8章(フォームと検証), 練習問題2

開発環境

• Microsoft Windows 7 Home Premium (OS)
• Internet Explorer 9 Beta(プラウザ)
• Microsoft Visual Web Developer 2010 Express Edition (IDE)
• Script言語:JavaScript

『初めてのJavaScript 第2版』(シェリー・パワーズ著、武舎広幸+武舎るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84311-425-5)の8章(フォームと検証)の練習問題8-2を解いてみる。

8-1.

<h2> 例8-6 テキスト関連フィールドに対する検証を変更</h2> <form id="Form1" action=""> <p> お名前: <input type="text" name="text1" id="Text1" /><br /> 郵便番号: <input type="text" name="text2" id="Text2" /><br /> ご住所: <input type="text" name="text3" id="Text3" size="60" /><br /> パスワード: <input type="password" name="text4" id="password1" /><br /> <input type="hidden" name="text5" value="秘密のテキスト" /> <textarea name="text4" id="textarea2" cols="50" rows="10">テキストエリア</textarea><br /> <br /> <input type="submit" value="送信" /> </p> </form> <script type="text/javascript"> catchEvent(window, "load", setupEventsAndFocus); function catchEvent(eventObj, event, eventHandler) { if (eventObj.addEventListener) { eventObj.addEventListener(event, eventHandler, false); } else if (eventObj.attachEvent) { event = "on" + event; eventObj.attachEvent(event, eventHandler); } } function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); event.stopPropagation(); } else { event.returnValue = false; event.cancelBubble = true; } } function setupEventsAndFocus(event) { catchEvent(document.getElementById("name"), "blur", checkRequired); catchEvent(document.getElementById("zip"), "change", validateField); catchEvent(document.getElementById("address"), "change", addressField); catchEvent(document.getElementById("password"), "change", passwordField); catchEvent(document.getElementById("someForm"), "submit", validateForm); document.getElementById("name").focus(); } function checkRequired(event) { var theEvent = event ? event : window.event; var target = theEvent.target ? theEvent.target : theEvent.srcElement; var txtInput = target.value; if (txtInput == null || txtInput == "") { alert("お名前をご記入ください"); } } function validateField(event) { var theEvent = event ? event : window.event; var target = theEvent.target ? theEvent.target : theEvent.srcElement; var regEx = /^\d{3}[-]?\d{4}$/; var OK = regEx.exec(target.value); if (!OK) { alert("郵便番号の形式が違っています"); } } function addressField(event) { var theEvent = event ? event : window.event; var target = theEvent.target ? theEvent.target : theEvent.srcElement; var regEx = /^[^0-9]+$/; var OK = regEx.exec(target.value); if (!OK) { alert("住所欄の数字はは半角数字なく全角数字で入力してください"); } } function passwordField(event) { var theEvent = event ? event : window.event; var target = theEvent.target ? theEvent.target : theEvent.srcElement; var regEx = /^\w{8}/ var OK = regEx.exec(target.value); if (!OK) { alert("パスワードは半角の8文字以上に設定してください"); } } function validateForm(event) { var theEvent = event ? event : window.event; var strResults = ""; var textInputs = document.getElementById("someForm").getElementsByTagName("input"); for (var i = 0; i < textInputs.length; i++) { if (textInputs[i].type != "sumbmit") { strResults += textInputs[i].value + "\n"; } } document.getElementById("textarea").value = strResults; cancelEvent(theEvent); } </script>

例8-6 テキスト関連フィールドに対する検証

お名前:
郵便番号:
ご住所:
パスワード:
テキストエリア

まだ正規表現をあまり理解できていないので想定どおりに機能しないかも。コメント欄等で指摘して頂けると嬉しいです。

いずれ詳説 正規表現 第3版を入手して正規表現の理解を深める計画。