プログラミング学習の記録 535.1 『初めてのJavaScript 第2版』(シェリー・パワーズ著、武舎広幸+武舎るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84311-425-5)の8章(フォームと検証)の練習問題2

開発環境

• Microsoft Windows 7 Home Premium (OS)
• Internet Explorer 9 (Webプラウザ)
• Microsoft Visual Web Developer 2010 Express Edition (IDE)
• Script言語:JavaScript

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

8-2.

コード

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);

    // パスワードが8文字以上であることをチェック
    catchEvent(document.getElementById("passwd"), "change", validatePassword);
    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("住所欄には半角数字は使用しないでください");
    }
}

// パスワードが8文字以上であるかチェックする関数
function validatePassword(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);
}

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

合わせて読んでいる書籍。

1. 14章でPHPとJavaScriptを組み合わせたWebアプリケーションが登場したので『初めてのPHP & MySQL 第2版』(Micbele E. Davis、Jon A. Phillips 著、西沢 直木 訳、オライリー・ジャパン、2008年、ISBN978-4-87311-365-4)
2. JavaScriptのライブラリーを活用できるようになるために『jQueryクックブック』(jQuery Community Experts 著、株式会社クイープ 訳、オライリー・ジャパン、2010年、ISBN978-4-87311-468-2)
3. JavaScript、APIを使って遊ぶために『Google Maps Hacks 第2版 ―地図検索サービスをもっと活用するテクニック』(Rich Gibson, Schuyler Erle 著、武舎 広幸、福地 太郎、武舎 るみ 訳、オライリー・ジャパン、2007年、ISBN978-4-87311-341-8)