開発環境
- OS X Lion - Apple(OS)
- Safari (Webプラウザ)
- TextWrangler(Text Editor) (BBEditの無料、light版)
- Script言語:JavaScript
- JavaScript Library: jQuery
『初めてのJavaScript 第2版』(シェリー・パワーズ著(Shelley Powers著)、武舎 広幸+武舎 るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84312-225-5) の8章(JavaScriptのフォームと検証)練習問第8-2を解いてみる。
その他参考書籍
- JavaScript 第6版
- JavaScriptリファレンス 第6版
- 『jQueryクックブック』(jQuery Community Experts 著、株式会社クイープ 訳、オライリー・ジャパン、2010年、ISBN978-4-87312-268-2)
8-2.
コード(TextWrangler)
<script> catch_event(window, "load", setup_events_and_focus); function catch_event(event_obj, event, event_handler){ if(event_obj.addEventListener){ event_obj.addEventListener(event, event_handler, false); } else if (event_obj.attachEvent){ event = "on" + event; event_obj.attachEvent(event, event_handler); } } function cancel_event(event){ if(event.preventDefault){ event.preventDefault(); event.stopPropagation(); } else { event.returnValue = false; event.cancelBubble = true; } } function setup_events_and_focus(event){ catch_event(document.getElementById("name"), "blur",check_name); catch_event(document.getElementById("zip"), "change", check_zip); catch_event(document.getElementById("address"), "change",check_address ); catch_event(document.getElementById("password"), "change", check_password); catch_event(document.getElementById("some_form"), "submit", validate_form); document.getElementById("name").focus(); } function check_name(event){ var event = event ? event : window.event; var target = event.target ? event.target : event.srcElement; var text = target.value; if(text === null || text === ""){ $('#d0').append("<p style='color:red'>お名前をご記入ください</p>"); } } function check_zip(event){ var event = event ? event : window.event; var target = event.target ? event.target : event.srcElement; if(! /^\d{3}[-]?\d{4}$/.test(target.value)){ $('#d0').append("<p style='color:red'>郵便番号の形式が違っています</p>"); } } function check_address(event){ var event = event ? event : window.event; var target = event.target ? event.target : event.srcElement; if( /[0-9]/.test(target.value)){ $('#d0').append("<p style='color:red'>住所欄は全角で入力してください</p>"); } } function check_password(event){ var event = event ? event : window.event; var target = event.target ? event.target : event.srcElement; if(! /^\w{8,}$/.test(target.value)){ $('#d0').append("<p style='color:red'>パスワードは8文字以上に設定してください</p>"); } } function validate_form(event){ var event = event ? event : window.event; var str = ""; var text_inputs = document.getElementById('some_form').getElementsByTagName("input"); for(var i = 0 ; i < text_inputs.length; i++){ if(text_inputs[i].type !== "submit"){ str += text_inputs[i].value + "\n"; } } document.getElementById("textarea").value = str; cancel_event(event); } </script> <div id="d0"> </div> <form id = "some_form" > 名前: <input id="name" type="text"/><br /> 郵便番号: <input id="zip" type="text"/><br /> 住所: <input id="address" type="text"/><br /> パスワード: <input id="password" type="password"/><br /> <input type="hidden" value="秘密のテキスト" /> <textarea id="textarea" cols="50" rows="10">テキストエリア</textarea><br /> <input type="submit" value="送信" /> </form>
ちなみにPython3kの場合。
コード(TextWrangler)
sample.py
#!/usr/bin/env python3.3 #-*- coding: utf-8 -*- import re zip_pattern = re.compile(r"^\d{3}[-]?\d{4}") address_pattern = re.compile(r"\D+") password_pattern = re.compile(r".{8,}") info = [] name ="" while name == "" or name == None: print("名前を入力") name = input() else: info.append(name) print("郵便番号を入力") zip = input() while not re.match(zip_pattern, zip): print("郵便番号の形式が違います") zip = input() else: info.append(zip) print("住所を入力") address = input() while not re.match(address_pattern, address): print("住所は全角で入力") address = input() else: info.append(address) print("パスワードを入力") password = input() while not re.match(password_pattern, password): print("パスワードは8文字以上") password = input() else: info.append(password) for x in info: print(x)
入出力結果(Terminal)
$ ./sample.py 名前を入力 名前を入力 kamimura 郵便番号を入力 1 郵便番号の形式が違います 1234567 住所を入力 12 住所は全角で入力 住所 パスワードを入力 1234567 パスワードは8文字以上 12345678 kamimura 1234567 住所 12345678 $
0 コメント:
コメントを投稿