JavaScript - フォームと検証(正規表現、exec関数)

初めての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 第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>

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

テキストエリア