JavaScript - フォームと検証(正規表現)

開発環境

• 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章(フォームと検証)練習問題2解いてみる。

その他参考書籍

• JavaScript 第5版 David Flanagan (著), 村上 列 (翻訳)
• JavaScriptクイックリファレンス David Flanagan (著), 木下 哲也 (翻訳), 福龍興業 (翻訳)
• 『jQueryクックブック』(jQuery Community Experts 著、株式会社クイープ 訳、オライリー・ジャパン、2010年、ISBN978-4-87311-468-2)

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 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 validateAddress(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 validatePasswd(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="text" name="text4" id="passwd" /><br />
<input type="hidden" name="text5" value="秘密のテキスト" />
<textarea name="text4" id="textarea" cols="50" rows="10">

</textarea>
<br /><br />
<input type="submit" value="送信"/>
</p>
</form>

お名前:
郵便番号:
ご住所:
パスワード: