開発環境
- 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 第6版
- JavaScriptリファレンス 第6版
- 『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", validateAddress); catchEvent(document.getElementById('passwd'), "change", validatePasswd); 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 text = target.value; if(text == null || text == ""){ $('#d0').text("お名前をご記入ください"); } } function validateField(event){ var theEvent = event ? event : window.event; var target = theEvent.target ? theEvent.target : theEvent.srcElement; var reg = /^\d{3}[-]?\d{4}$/; var OK = reg.exec(target.value); if(!OK){ $('#d0').text('郵便番号の形式が違っています'); } } function validateAddress(event){ var theEvent = event ? event : window.event; var target = theEvent.target ? theEvent.target : theEvent.srcElement; var reg = /^\D*$/; var OK = reg.exec(target.value); if(!OK){ $('#d0').text('住所欄には半角数字は使わないでください'); } } function validatePasswd(event){ var theEvent = event ? event : window.event; var target = theEvent.target ? theEvent.target : theEvent.srcElement; var reg = /^.{8,}$/; var OK = reg.exec(target.value); if(!OK){ $('#d0').text('パスワードは8文字以上に設定してください'); } } function validateForm(event){ var theEvent = event ? event : window.event; var results = ''; var text = document.getElementById('someForm').getElementsByTagName('input'); for(var i = 0; i < text.length; i++){ if(text[i].type != "submit"){ results += text[i].value + "\n"; } } $('#textarea').text(results); cancelEvent(theEvent); } </script> <div id="d0" style="color:red;"> </div> <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="text" name="text4" id="passwd"/><br /> <input type="hidden" name="text5" value="秘密のテキスト"/><br /> <textarea name="text6" id="textarea" cols="50" rows="10"> テキストエリア </textarea> <br /><br /> <input type="submit" value="送信" /> </p> </form>
0 コメント:
コメントを投稿