JavaScript 最佳表單驗證 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
        <title>註冊會員</title> 
        <style type="text/css"> 
            .table { 
                border-collapse:collapse;    
                font-size:12px; 
            } 
            .input { 
                width:200px; 
                height:22px; 
            } 
            .stats1 { 
                color:#aaa;                    
            } 
            .stats2 { 
                color:#000; 
            } 
            .stats3 { 
                color:red; 
            } 
            .stats4 { 
                color:green; 
            } 
        </style> 
    </head> 
    <body> 
        <form action="index.php" method="post" onSubmit="return regCheck('click')"> 
        <table border="0" align="center" width="500" class="table"> 
            <tr> 
                <td width="80" height="25" align="right">用戶名稱:</td><td><input type="text" name="username" value="" class="input" /> <span class="stats1"></span></td> 
            </tr> 
            <tr> 
                <td width="80" height="25" align="right">密碼:</td><td><input type="password" name="password" value="" class="input" /> <span class="stats1"></span></td> 
            </tr> 
            <tr> 
                <td width="80" height="25" align="right">確認密碼:</td><td><input type="password" name="repass" value="" class="input" /> <span class="stats1"></span></td> 
            </tr> 
            <tr> 
                <td width="80" height="25" align="right">電子郵箱:</td><td><input type="text" name="email" value="" class="input" /> <span class="stats1"></span></td> 
            </tr> 
            <tr> 
                <td height="30"></td><td align="left"><input type="submit" name="send" value="提交" /> <input type="reset" value="重置" /></td> 
            </tr> 
        </table> 
        </form> 
    </body> 
</html> 
<script language="javascript"> 
// 找到 input 後面的 SPAN 標簽 
function gspan(cobj){ 
    while(true){ 
        if(cobj.nextSibling.nodeName!="SPAN") 
            cobj=cobj.nextSibling; 
        else 
            return cobj.nextSibling;     
    } 

 
function check(obj, info, fun, click){ 
    var sp=gspan(obj); 
    obj.onfocus=function(){  
        sp.innerHTML=info; 
        sp.className="stats2"; 
         
    } 
 
    obj.onblur=function(){ 
        if(fun(this.value)){ 
            sp.innerHTML="輸入正確√"; 
            sp.className="stats4"; 
             
        }else{ 
            sp.innerHTML=info; 
            sp.className="stats3"; 
        } 
    } 
 
    if(click=="click") 
        obj.onblur(); 

 
//頁面加載完自動調用 
onload=regCheck 
function regCheck(click){ 
 
var stat=true; 
    var username=document.getElementsByName("username")[0]; 
    var password=document.getElementsByName("password")[0]; 
    var repass=document.getElementsByName("repass")[0]; 
    var email=document.getElementsByName("email")[0]; 
    var other=document.getElementsByName("other")[0]; 
 
        // 驗證用戶名 
    check(username, "用戶名稱為4-20位的英文字母或數字!", function(val){ 
 
        if(val.match(/^\S+$/) && val.length >=4 && val.length <=20){ 
            return true; 
        }else{ 
            stat=false; 
            return false; 
        } 
    }, click); 
         
        // 驗證密碼 
    check(password, "用戶密碼必須在6-20位之間!", function(val){ 
        if(val.match(/^\S+$/) && val.length >=6 && val.length <=20){ 
            return true; 
        }else{ 
            stat=false; 
            return false; 
        } 
    }, click); 
 
        // 驗證確認密碼 
    check(repass, "確定密碼要和上面一致!", function(val){ 
        if(val.match(/^\S+$/) && val.length >=6 && val.length <=20 && val==password.value){ 
            return true; 
        }else{ 
            stat=false; 
            return false; 
        } 
    }, click) 
 
    // 驗證Email 
    check(email, "請輸入正確格式的電子郵箱!", function(val){ 
        if(val.match(/\w+@\w+\.\w/)){ 
            return true; 
        }else{ 
            stat=false; 
            return false; 
        } 
    }, click)        
 
    return stat; 

</script> 
 

摘自 Lee.的專欄

發佈留言