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

來源:互聯網
上載者:User
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)'>

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

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。