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-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",setupEvents);
function catchEvent(o,e,h){
  if(o.addEventListener){
    o.addEventListener(e,h,false);
  } else if(o.attachEvent){
    e = "on" + e;
    o.attachEvent(e,h);
  }
}

function cancelEvent(e){
  if(e.preventDefault){
    e.preventDefault();
    e.stopPropagation();
  } else {
    e.returnValue = false;
    e.cancelBubble = true;
  }
}

function setupEvents(e){
  catchEvent(document.getElementById("name"),"blur",checkRequired);
  catchEvent(document.getElementById("zip"),"change",validateField);
  catchEvent(document.getElementById("address"),"change",checkAddress);
  catchEvent(document.getElementById("passwd"),"change",checkPassword);
  catchEvent(document.getElementById("someForm"),"submit",validateForm);
  document.getElementById("name").focus();
}

function checkRequired(event){
  var e = event ? event : window.event;
  var target = e.target ? e.target : e.srcElement;
  
  var txtInput = target.value;
  if(txtInput == null || txtInput == ""){
    alert("名前を記入して下さい");
  }
}

function  validateField(event){
  var e = event ? event : window.event;
  var target = e.target ? e.target : e.srcElement;
  var reg = /^\d{3}[-]?\d{4}$/;
  
  var OK = reg.exec(target.value);
  if(!OK){
    alert("郵便番号の形式が違っています");
  }
}

function checkAddress(event){
  var e = event ? event : window.event;
  var target = e.target ? e.target : e.srcElement;
  var reg = /^[^0-9]+$/;
  
  var OK = reg.exec(target.value);
  if(!OK){
    alert("住所欄には全角数字を使ってください");
  }
}

function checkPassword(event){
  var e = event ? event : window.event;
  var target = e.target ? e.target : e.srcElement;
  var reg = /^\w{8,}$/;
  
  var OK = reg.exec(target.value);
  if(!OK){
    alert("パスワードは8文字以上にしてください");
  }
}

function validateForm(event){
  var e = event ? event : window.event;
  var result = "";
  var textInputs = 
    document.getElementById("someForm").getElementsByTagName("input");
  for(var i = 0;i < textInputs.length; i++){
    if(textInputs[i].type != "submit"){
      result += textInputs[i].value + "\n";
    }
  }
  document.getElementById("textarea").value=result;
  cancelEvent(e);
}
</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="password" name="text4" id="passwd" /><br />
<input type="hidden" name="text5" id="秘密のテク外" />
<textarea name = "text4" id="textarea" cols="50" rows="10">
テキストエリア
</textarea>
<br /><br />
<input type="submit" value="送信" />
</p>
</form>

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