JavaScript - フォームと検証(入力フィールドと正規表現)

初めてのJavaScript 第2版
Shelley Powers (著)
武舎 広幸、武舎 るみ (訳)

開発環境

• 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
$