網頁表單的javascript整合驗證方法舉例

javascript|網頁   作為一名Web設計人員、一名Coder，你是否已經厭倦了網頁設計中的表單驗證問
題？不厭其煩的拷貝 if(x) { alert('wrong');} ，還是使用一個難以盡和我意的
IDE ？好吧，讓我來告訴你一種比較lazy的寫法，你也許就不會對錶單驗證那麼頭大
了……
    原理：
           表單驗證無非是要對要收集每一條資訊進行驗證，也就是要寫一個名為
       frmValid的javascript函數，在其中執行如下操作：
             ...
             if (待驗證條目 不符合條件)
             {
                  alert('出錯了!');
                  待驗證條目.focus();
                  return false;
             }
             ...
             // all right
             return true;
           當然，<form ... onsubmit='return frmValid()'>必須包含在
       HTML代碼中。想想看，待驗證條目越多代碼越長，也就越容易出錯。
           下面我們把驗證條目放到一個數組裡，如下：
             elemArray = new Array(
                 '待驗證條目名',
                 '驗證條件',
                 '出錯提示');
           那麼驗證代碼將大大精簡，我們只要如下使用迴圈就可實現上述冗長
       代碼時下的功能，這裡我們用with和eval語句構造判斷條件：
             with(eval('obj.'+elems[i][0]))
             {
                 if(eval(elems[i][1]))
                 {
                     window.alert(elems[i][2]);
                     focus();
                     return false;
                 }
             }
           我們建立多位元組就可實現迴圈遍曆每個條目：
             elems = new Array(
                 new Arrary( ...),
                 ...
             );
             for(i = 0; i < elems.length; i++)
             {
                 // 上面的驗證語句
             }

    
    實戰：
        1、使用如下例子編寫驗證指令碼：
<SCRIPT LANGUAGE="javascript" type="text/javascript">
//
// Function: frmValid
// ------------------
// Author    hongz
// Usage:    YourForm..
// Purpose:  To validate form elements in an integrated way.
//
function frmValid(obj)
{
    // Elements array, initialization for validation
    elems = new Array(
        new Array(
            'username',  // name of elements to be validated
            'value.length<1 || value.search(/[^a-zA-z0-9_]/)>=0', 
                         // validation condition
            '無效的使用者名稱:只能輸入6-20位字母、數字、底線的組合!'),
                         // prompt on failure
        new Array(
            'password', 
            'value.length<5 || value.search(/[^a-zA-z0-9_]/)>=0', 
            '無效的密碼:只能輸入6-20位字母、數字、底線的組合!'),
        new Array(
            'email', 
            'isMail(value)==false', 
            'Email是您在網上的重要聯絡工具,請務必正確填寫!')
    );

    // Validate here, using eval statement.
    for(i = 0; i < elems.length; i++)
    {
        with(eval('obj.'+elems[i][0]))
        {
            if(eval(elems[i][1]))
            {
                window.alert(elems[i][2]);
                focus();
                return false;
            }
        }
    }
    return true;
}
//-->
</SCRIPT>
        2、為form添加onsubmit屬性：
           <form ... onsubmit='return frmValid(this)'>

    如果你感覺我的方法還行的話，那我歡迎你使用，呵呵……