程式主體按照前面的寫法佈局完成之後就比較不會亂了,程式設計師可以很容易的用複製檔案的方式繼續完成每一個頁面細節的部份。而細節的部份很多都是讓使用者輸入的表單,這就需要規範出表單的寫法以及驗證的方式。表單的寫法可以用表格(<table></table>)或區塊<div></div>或欄位集<fieldset></fieldset>的方式,用區塊的方法就是將表單的排版工作交給style去處理,各有好處這裡不做評比與探討。以表格的方法為例子。

<div id="wrapper">
    <form id="registform" method="post" action="registproc.php">
        <table class="inputform">
            <thead>
                <caption>建立帳號</caption>
            </thead>
            <tbody>
                <tr><th>登入帳號:</th><td>
                    <input id="username" name="username" type="text" />
                    <div id="err01" class="warning">帳號長度必須是4個以上英文字母或者數字組成的字串。</div>
                    <div id="err02" class="warning">您設定的帳號已經存在於系統中,請重新選擇別的帳號。</div>
                </td></tr>
                <tr><th>密碼:</th><td>
                    <input id="password" name="password" type="password" />
                    <div id="err03" class="warning">密碼長度必須是4個以上英文字母或者數字組成的字串。</div>
                    <div id="err04" class="warning">密碼與確認密碼的內容不符合。</div>
                </td></tr>
                <tr><th>確認密碼:</th><td>
                    <input id="confirm" name="confirm" type="password">
                </td></tr>
                <tr><th>真實姓名:</th><td>
                    <input id="realname" name="realname" type="text" />
                    <div id="err05" class="warning">請輸入您的真實姓名,至少讓您旅館內部能夠識別。</div>
                </td></tr>
                <tr><th>聯絡電話:</th><td>
                    <input id="phone" name="phone" type="text" />
                    <div id="err06" class="warning">電話號碼的格式為: 區號-電話號碼</div>
                </td></tr>
                <tr><th>EMail:</th><td>
                    <input id="email" name="email" type="text" />
                    <div id="err07" class="warning">您輸入的EMail地址並不正確</div>
                </td></tr>
                <tr><td colspan="2" class="buttonrow"><input id="save" type="submit" value="保存" /></td></tr>
            </tbody>
        </table>
    </form>
</div>

這是一個用表格的方式寫出來的使用者註冊表單,兩個比較特別的地方:

欄位標題一律使用<th></th>包起來,這樣也比較符合網頁標準化的規則。

每個欄位的錯誤訊息用<div></div>也一併寫在欄位附近,這樣的好處是你只要控制它是否顯示就可以讓使用者明白哪裡有問題。接著就是欄位驗證的問題,先看程式碼。

<script type="text/javascript">

function testReg(regstr, objSelector) {
    var reg = new RegExp(regstr);
    var value = $(objSelector).val();
    return (reg.test(value));
}

function toggleErr(errselect, legal) {
    if (legal) {
        $(errselect).hide();
    } else {
        $(errselect).show();
    }
}

$(document).ready(function() {
    $(".warning").hide();
    $("#registform").submit(function() {
        var result = true;
        toggleErr("#err01", testReg("^\\w{4,}", "#username") );
        toggleErr("#err03", testReg("^\\w{4,}", "#password") );
        toggleErr("#err04", ($("#password").val() == $("#confirm").val()) );
        toggleErr("#err05", testReg("^\\S{2,}", "#realname") );
        toggleErr("#err06", testReg("^(\\d{2,5}-\\d{6,8}|\\d{10})", "#phone") );
        toggleErr("#err07", testReg("^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$", "#email") );
        $(".warning").each( function() {
            if ($(this).css("display") == "block") result=false;
        });
        return result;
    });
});
</script>

使用jQuery以後,看javascript的習慣必須改一下,先找到$(document).ready()的程式段開始讀,因為那邊是整個頁面完全載入之後第一個要執行的程式。首先使用$(".warning").hide();這個指令將所有包含warning這個class style的物件全部隱藏起來,也就是讓表單變成完全乾淨的,不包含錯誤訊息的。

再來就是讓表單在提交(submit)的時候進行檢查的動作,當檢查不合法就將錯誤訊息顯示出來,因此寫了個小函數toggleErr。而前端的驗證幾乎90%以上都可以用正規運算式(regula expression)來驗證,所以再寫一個簡單的函數testReg,讓正規運算式的寫法更加簡單。

最後只要檢查是否有錯誤訊息顯示出來就知道這個表單是否合法,可不可以提交到後端處理,程式碼相當的簡單單純,當然正規運算式在這裡也是一個必要的知識,如果團隊裏面的程式設計師沒有辦法自己寫出正規運算式,可以先準備好一些常用的,讓大家可以套著用就行了。

這一篇先寫前端的驗證方法,下一篇再來寫使用ajax的後端驗證方法。

創作者介紹
創作者 漠哥 的頭像
漠哥

人生四十宅開始 二號宅

漠哥 發表在 痞客邦 留言(0) 人氣()