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

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

開発環境

• OS X Lion - Apple(OS)
• Safari (Webプラウザ)
• BBEdit - Bare Bones Software, Inc.(Text Editor)
• Script言語:JavaScript
• JavaScript Library: jQuery

『初めてのJavaScript 第2版』(シェリー・パワーズ著(Shelley Powers著)、武舎 広幸+武舎 るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84312-225-5) の8章(フォームと検証)練習問第8-2を解いてみる。

その他参考書籍

• JavaScript 第6版
• JavaScriptリファレンス 第6版
• JavaScriptクックブック
• 『jQueryクックブック』(jQuery Community Experts 著、株式会社クイープ 訳、オライリー・ジャパン、2010年、ISBN978-4-87312-269-1)

8-2.

コード(BBEdit)

<form id="someForm">
<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" value="秘密のテキスト" />
<textarea name="text4" id="textarea" cols="50" rows="10">テキストエリア</textarea>
<br /><br />
<input type="submit" value="送信" />
</p>
</form>
<script>
var someForm = $('#someForm');
function validateName(){
  var name = $('#name').val();
  if(name === null || /^\s*$/.test(name)) alert("名前を入力してください");
}
function validateZip(){
   var zip   = $('#zip').val();
   if(! /^\d{3}-?\d{4}$/.test(zip)) alert("郵便番号の形式が違います");
}
function validateAddress(){
  var address = $('#address').val();
  if(/[0-9]/.test(address)) alert("住所欄は数字も全角で入力してください");
}
function validatePassword(){
  var password = $('#passwd').val();
  if(password.length < 8) alert("パスワードは8文字以上に設定してください");
}
function validateForm(event){
  var result = "";
  var inputs = $('#someForm input');
  for(var i = 0; i < inputs.length; i++){
    if(inputs[i].type !== "submit"){
      result += inputs[i].value + "\n";
    }
  }
  $('#textarea').val(result);
  event.preventDefault();
}
function setUpEventsAndFocus(event){
  $('#name').blur(validateName);
  $('#zip').change(validateZip);
  $('#address').change(validateAddress);
  $('#passwd').change(validatePassword);
  $('#someForm').submit(validateForm);
}
setUpEventsAndFocus();
</script>

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