開発環境
- OS X Lion - Apple(OS)
- Safari (Webプラウザ)
- TextWrangler(Text Editor) (BBEditの無料、light版)
- Script言語:JavaScript
- JavaScript Library: jQuery
『初めてのJavaScript 第2版』(シェリー・パワーズ著(Shelley Powers著)、武舎 広幸+武舎 るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84311-425-5) の8章(フォームと検証)練習問題8-2解いてみる。
その他参考書籍
- JavaScript 第5版 David Flanagan (著), 村上 列 (翻訳)
- JavaScriptクイックリファレンス David Flanagan (著), 木下 哲也 (翻訳), 福龍興業 (翻訳)
- 『jQueryクックブック』(jQuery Community Experts 著、株式会社クイープ 訳、オライリー・ジャパン、2010年、ISBN978-4-87311-468-2)
8-2.
コード(TextWrangler)
<script> 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",checkAddress); catchEvent(document.getElementById("passwd"),"change",checkPasswd); 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 rgEx = /^\d{3}[-]?\d{4}$/; var OK = rgEx.exec(target.value); if(!OK){ alert("郵便番号の形式が違っています"); } } function checkAddress(event){ var theEvent = event ? event : window.event; var target = theEvent.target ? theEvent.target : theEvent.srcElement; var rgEx = /^[^0-9]+$/; var OK = rgEx.exec(target.value); if(!OK){ alert("住所に半角英数字は使用不可"); } } function checkPasswd(event){ var theEvent = event ? event : window.event; var target = theEvent.target ? theEvent.target : theEvent.srcElement; var rgEx = /^.{8,}$/; var OK = rgEx.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 != "submit"){ strResults += textInputs[i].value + "\n"; } } document.getElementById("textarea").value = strResults; cancelEvent(theEvent); } </script> <form id="someForm" action=""> <p> お名前: <input type="text" name="text1" id="name" /><br /> 郵便番号: <input type="text" name="text2" id="zip" /><br /> ご住所: <input type="text" name="text3" id="address" size="60" /><br /> パスワード: <input type="text4" name="text4" id="passwd" /><br /> <input type="hidden" name="text5" value="秘密のテキスト" /><br /> <textarea name="text4" id="textarea" cols="50" rows="10">テキストエリア</textarea><br /> <br /> <input type="submit" value="送信"/> </p> </form>
0 コメント:
コメントを投稿