欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

建立良好體驗(yàn)度的Web注冊(cè)系統(tǒng)ajax

 更新時(shí)間：2007年07月09日 00:00:00   作者：  
*項(xiàng)目名稱(chēng):具有良好體驗(yàn)度的Web注冊(cè)系統(tǒng)
*作者:草履蟲(chóng)
*聯(lián)系:caolvchong@gmail.com
*時(shí)間:2007-6-29
*起因和版權(quán)說(shuō)明:
  1.藍(lán)色理想上有位會(huì)員發(fā)布了個(gè)類(lèi)似的系統(tǒng),提問(wèn)說(shuō)驗(yàn)證碼不支持firefox的刷新,于是萌生念頭做一個(gè).本系統(tǒng)外觀(按鈕取色等)借鑒了該系統(tǒng),但細(xì)節(jié)實(shí)現(xiàn)原理并不相同(該文地址:http://bbs.blueidea.com/thread-2761325-1-4.html).
  2.另外,自己做的這個(gè)注冊(cè)系統(tǒng)中利用了網(wǎng)絡(luò)上的無(wú)組件驗(yàn)證碼(作者sipo)
  3.至于密碼強(qiáng)度的算法借鑒了藍(lán)色理想的一篇文章(http://www.blueidea.com/tech/web/2006/4324.asp),但該算法并不十分理想,如果有更好算法的朋友不妨交流一下
*特點(diǎn)和知識(shí)點(diǎn):
  1.AJAX驗(yàn)證用戶(hù)名和驗(yàn)證碼,同時(shí)異步進(jìn)行用戶(hù)名注冊(cè)(都屬于AJAX的很基礎(chǔ)部分)
  2.支持驗(yàn)證碼刷新(包括firefox平臺(tái)下)
  3.密碼,郵箱,用戶(hù)名等即時(shí)檢測(cè)(利用javascript DOM)
  4.HTML通過(guò)W3C Strict驗(yàn)證,CSS也通過(guò)W3C CSS驗(yàn)證(其實(shí)這個(gè)有點(diǎn)多余,并不完全必要)
*開(kāi)發(fā)平臺(tái):Windows2003 IIS6.0 Access數(shù)據(jù)庫(kù)
*工具:DreamWeaver(寫(xiě)ASP),Aptana(寫(xiě)Javascript,HTML和CSS),Emeditor(寫(xiě)這篇文章),Access2003(數(shù)據(jù)庫(kù))
*測(cè)試平臺(tái):Firefox2.0,Opera9.21,IE6.0,IE7.0
*演示地址:http://finish.3322.org/reg/reg.htm(短期有效,在本機(jī)上,可能訪問(wèn)不順暢)
*原文地址:http://cceer.xmu.edu.cn/blog/view.asp?id=52
*補(bǔ)充:
  如果你使用這個(gè)注冊(cè)系統(tǒng),請(qǐng)務(wù)必注意下列問(wèn)題:
    本系統(tǒng)沒(méi)有對(duì)密碼進(jìn)行加密,如果需要,可以搜索MD5加密
    本系統(tǒng)沒(méi)有進(jìn)行防注入設(shè)置,如果需要,可以搜索SQL防注入
  限于本人水平上的限制,錯(cuò)誤和不足在所難免,如果你有問(wèn)題或者建議,請(qǐng)聯(lián)系我,感謝!
*這里是效果圖
限于文章長(zhǎng)度的限制,只帖出兩個(gè)js文件和一個(gè)顯示注冊(cè)頁(yè)面,至于后臺(tái)處理頁(yè)面以及css文件等,請(qǐng)?jiān)趬嚎s包中查看
1.reg.htm(由于BLOG會(huì)過(guò)濾,分開(kāi)三個(gè)部分寫(xiě)) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>草履蟲(chóng)---簡(jiǎn)易AJAX注冊(cè)頁(yè)面</title>
  <link href="reg.css" type="text/css" rel="stylesheet" />
  <script src="detect.js" type="text/javascript"></script>
  <script src="ajax.js" type="text/javascript"></script>
</head>
<body onload="check_data();">


view plaincopy to clipboardprint?
<UL>  
<LI id=title>草履蟲(chóng)---Web注冊(cè)系統(tǒng)   
<LI class=underline>  
    <LABEL>注冊(cè)用戶(hù)名:   
        <INPUT onblur=check_id(this.value); maxLength=16>  
    </LABEL>  
    <SPAN>支持漢字,單詞,數(shù)字,敏感字符屏蔽</SPAN>  

<LI>  
    <LABEL>注冊(cè)密碼:   
        <INPUT onblur=check_password(); type=password value="">  
    </LABEL>  
    <SPAN>密碼在6-16位之間,敏感字符屏蔽</SPAN>  

<LI class=underline>  
    <LABEL>重復(fù)密碼:   
        <INPUT onblur=check_pw(); type=password maxLength=16 value="">  
    </LABEL>  
    <SPAN></SPAN>  

<LI class=underline>  
    <LABEL>郵箱:   
        <INPUT onblur=check_email(this.value)>  
    </LABEL>  
    <SPAN>email是聯(lián)系重要手段</SPAN>  

<LI class=underline>驗(yàn)證碼:   
    <INPUT onblur=checkcode(this.value); maxLength=5>  
    <LABEL>  
        <IMG id=src onclick="this.src=this.src+'?'+Math.random();" height=18 alt=看不清楚?請(qǐng)點(diǎn)擊刷新 src="getcode.asp">  
        <SPAN>看不清楚?請(qǐng)點(diǎn)擊驗(yàn)證碼刷新</SPAN>  
    </LABEL>  

<LI class=underline>  
    相關(guān)協(xié)議:   
        <LABEL onclick=accept_info();><INPUT type=radio name=info>接受</LABEL>  
        <LABEL onclick=refuse_info();><INPUT type=radio name=info>不接受</LABEL>    
        <INPUT class=button type=button value=閱讀協(xié)議>  

<LI class=underline>  
    <INPUT class="button setleft" onclick="sendinfo($('input')[0].value,$('input')[1].value,$('input')[3].value)" type=submit value=注冊(cè)>  
    <INPUT class=button onclick=reset_info() type=reset value=重置>  
    <SPAN></SPAN>  

<LI class=copyright>作者:草履蟲(chóng)   
<LI class=copyright>時(shí)間:2007-6-28   
<LI class=copyright>聯(lián)系:caolvchong@gmail.com   
<LI class=copyright>Blog---Web2.0之路:<A >http://cceer.xmu.edu.cn/blog/</A>  
/LI></UL>  

     
        草履蟲(chóng)---Web注冊(cè)系統(tǒng)

            注冊(cè)用戶(hù)名:

            
            支持漢字,單詞,數(shù)字,敏感字符屏蔽

        
            注冊(cè)密碼:

            
            密碼在6-16位之間,敏感字符屏蔽

        
            重復(fù)密碼:

            

        

            郵箱:

            
            email是聯(lián)系重要手段

        驗(yàn)證碼:

            

                看不清楚?請(qǐng)點(diǎn)擊驗(yàn)證碼刷新

        

            相關(guān)協(xié)議:
                接受
                不接受 

        

            

            

        作者:草履蟲(chóng)
        時(shí)間:2007-6-28
        聯(lián)系:caolvchong@gmail.com
        Blog---Web2.0之路:http://cceer.xmu.edu.cn/blog/

</body>
</html>

2.detect.js view plaincopy to clipboardprint?
    var flag=[0,0,0,0,0,0];   
    var $=function(tagName){   
        return document.getElementsByTagName(tagName);   
    }   
//----------接受協(xié)議   
    function accept_info(){   
        flag[0]=1;   
        check_data();   
    }   
//----------拒絕協(xié)議   
    function refuse_info(){   
        flag[0]=0;   
        check_data();   
    }   
//----------重置   
    function reset_info(){   
        var info=["支持漢字,單詞,數(shù)字,敏感字符屏蔽","密碼在6-16位之間,敏感字符屏蔽","","email是聯(lián)系重要手段","看不清楚?請(qǐng)點(diǎn)擊驗(yàn)證碼刷新"]   
        for(var i=0;i<$("span").length;i++){   
            $("span")[i].innerHTML=info[i];   
            flag[i]=0;   
        }   
        for(var i=0;i<$("input").length-3;i++){   
            $("input")[i].value="";   
        }   
        check_data();   
    }   
//----------郵箱檢測(cè)   
    function check_email(email){   
        var reEmail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;   
        var b_email=reEmail.test(email);   
        if(b_email){   
            $("span")[3].innerHTML="<IMG src="yesok.gif"> 郵箱可用";   
            flag[1]=1;   
            check_data();   
        }   
        else{   
            $("span")[3].innerHTML="<IMG src="yesno.gif"> 郵箱錯(cuò)誤";   
            flag[1]=0;   
            check_data();   
        }   
    }   
//----------密碼檢測(cè)   
    function check_password(obj){   
        var pwd=$("input")[1].value;   
        var reChinese=/[\u0391-\uFFE5]+/;   
        var b_chinese=reChinese.test(pwd);   
        var reSpace=/\s+/;   
        var b_space=reSpace.test(pwd);   
        //-------長(zhǎng)度測(cè)試   
        if(pwd.length<6){   
            $("span")[1].innerHTML="<IMG src="yesno.gif"> 密碼長(zhǎng)度不能小于6";   
            flag[2]=0;   
            check_data();   
        }   
        //-------合法性檢測(cè):不能包含漢字   
        else if(b_chinese){   
            $("span")[1].innerHTML="<IMG src="yesno.gif"> 密碼不能包含中文";   
            flag[2]=0;   
            check_data();   
        }   
        //-------合法性檢測(cè):不能包含空格   
        else if(b_space){   
            $("span")[1].innerHTML="<IMG src="yesno.gif"> 密碼不能包含空格";   
            flag[2]=0;   
            check_data();   
        }   
        //-------合法時(shí)顯示密碼強(qiáng)度   
        else{   
            //定義對(duì)應(yīng)的消息提示   
            var num=getResult(pwd);   
            var msg=new Array("<IMG src="bad.gif"> 密碼強(qiáng)度差","<IMG src="comm.gif"> 密碼強(qiáng)度一般","<IMG src="good.gif"> 密碼強(qiáng)度強(qiáng)壯");   
            $("span")[1].innerHTML=msg[num];   
            if($("input")[2].value!=""){   
                check_pw();   
                }   
            return flag[2]=1;   
            check_data();   
            }   
        }   
        //定義檢測(cè)函數(shù),返回0/1/2分別代表差/一般/強(qiáng)   
        function getResult(s){   
            var ls =-1;   
            if (s.match(/[a-z]/ig)){   
                ls++;   
            }   
            if (s.match(/[0-9]/ig)){   
                ls++;   
            }   
            if (s.match(/(.[^a-z0-9])/ig)){   
                ls++;   
            }   
            return ls;   
        }   
    //---------密碼一致性檢測(cè)     
        function check_pw(){   
            var pwd=$("input")[1].value.toString();   
            var check_pwd=$("input")[2].value.toString();   
            if(flag[2]==1){   
                if(pwd==check_pwd){   
                    $("span")[2].innerHTML="<IMG src="yesok.gif"> 密碼可以使用";   
                    flag[3]=1;   
                    check_data();   
                }   
                else{   
                    $("span")[2].innerHTML="<IMG src="yesno.gif"> 兩次密碼不相同";   
                    flag[3]=0;   
                    check_data();   
                }   
            }   
        }   
    //---------用戶(hù)名合法性檢測(cè)   
        function check_id(id_name){//只能字母和數(shù)字,是否相同用AJAX判斷   
            var reId=/^[\w\u0391-\uFFE5]+$/;   
            var b_id=reId.test(id_name);   
            if(!b_id){   
                $("span")[0].innerHTML="<IMG src="yesno.gif"> ID命名非法";   
                flag[4]=0;   
                check_data();   
            }   
            else{//合法用戶(hù)名用ajax的checkid()檢測(cè)是否被注冊(cè)過(guò)   
                checkid(id_name);   
            }   
        }   
    //---------檢查數(shù)據(jù),使提交按鈕是否生效   
        function check_data(){   
            if(flag[0]==1 && flag[1]==1 && flag[2]==1 && flag[3]==1 && flag[4]==1 && flag[5]==1){   
                $("input")[8].disabled=false;   
            }   
            else{   
                $("input")[8].disabled=true;   
            }   
        }   

//--------------------------------------------------------------------  

        var flag=[0,0,0,0,0,0];
        var $=function(tagName){
            return document.getElementsByTagName(tagName);
        }
    //----------接受協(xié)議
        function accept_info(){
            flag[0]=1;
            check_data();
        }
    //----------拒絕協(xié)議
        function refuse_info(){
            flag[0]=0;
            check_data();
        }
    //----------重置
        function reset_info(){
            var info=["支持漢字,單詞,數(shù)字,敏感字符屏蔽","密碼在6-16位之間,敏感字符屏蔽","","email是聯(lián)系重要手段","看不清楚?請(qǐng)點(diǎn)擊驗(yàn)證碼刷新"]
            for(var i=0;i<$("span").length;i++){
                $("span")[i].innerHTML=info[i];
                flag[i]=0;
            }
            for(var i=0;i<$("input").length-3;i++){
                $("input")[i].value="";
            }
            check_data();
        }
    //----------郵箱檢測(cè)
        function check_email(email){
            var reEmail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            var b_email=reEmail.test(email);
            if(b_email){
                $("span")[3].innerHTML=" 郵箱可用";
                flag[1]=1;
                check_data();
            }
            else{
                $("span")[3].innerHTML=" 郵箱錯(cuò)誤";
                flag[1]=0;
                check_data();
            }
        }
    //----------密碼檢測(cè)
        function check_password(obj){
            var pwd=$("input")[1].value;
            var reChinese=/[\u0391-\uFFE5]+/;
            var b_chinese=reChinese.test(pwd);
            var reSpace=/\s+/;
            var b_space=reSpace.test(pwd);
            //-------長(zhǎng)度測(cè)試
            if(pwd.length<6){
                $("span")[1].innerHTML=" 密碼長(zhǎng)度不能小于6";
                flag[2]=0;
                check_data();
            }
            //-------合法性檢測(cè):不能包含漢字
            else if(b_chinese){
                $("span")[1].innerHTML=" 密碼不能包含中文";
                flag[2]=0;
                check_data();
            }
            //-------合法性檢測(cè):不能包含空格
            else if(b_space){
                $("span")[1].innerHTML=" 密碼不能包含空格";
                flag[2]=0;
                check_data();
            }
            //-------合法時(shí)顯示密碼強(qiáng)度
            else{
                //定義對(duì)應(yīng)的消息提示
                var num=getResult(pwd);
                var msg=new Array(" 密碼強(qiáng)度差"," 密碼強(qiáng)度一般"," 密碼強(qiáng)度強(qiáng)壯");
                $("span")[1].innerHTML=msg[num];
                if($("input")[2].value!=""){
                    check_pw();
                    }
                return flag[2]=1;
                check_data();
                }
            }
            //定義檢測(cè)函數(shù),返回0/1/2分別代表差/一般/強(qiáng)
            function getResult(s){
                var ls =-1;
                if (s.match(/[a-z]/ig)){
                    ls++;
                }
                if (s.match(/[0-9]/ig)){
                    ls++;
                }
                 if (s.match(/(.[^a-z0-9])/ig)){
                    ls++;
                }
                return ls;
            }
        //---------密碼一致性檢測(cè)    
            function check_pw(){
                var pwd=$("input")[1].value.toString();
                var check_pwd=$("input")[2].value.toString();
                if(flag[2]==1){
                    if(pwd==check_pwd){
                        $("span")[2].innerHTML=" 密碼可以使用";
                        flag[3]=1;
                        check_data();
                    }
                    else{
                        $("span")[2].innerHTML=" 兩次密碼不相同";
                        flag[3]=0;
                        check_data();
                    }
                }
            }
        //---------用戶(hù)名合法性檢測(cè)
            function check_id(id_name){//只能字母和數(shù)字,是否相同用AJAX判斷
                var reId=/^[\w\u0391-\uFFE5]+$/;
                var b_id=reId.test(id_name);
                if(!b_id){
                    $("span")[0].innerHTML=" ID命名非法";
                    flag[4]=0;
                    check_data();
                }
                else{//合法用戶(hù)名用ajax的checkid()檢測(cè)是否被注冊(cè)過(guò)
                    checkid(id_name);
                }
            }
        //---------檢查數(shù)據(jù),使提交按鈕是否生效
            function check_data(){
                if(flag[0]==1 && flag[1]==1 && flag[2]==1 && flag[3]==1 && flag[4]==1 && flag[5]==1){
                    $("input")[8].disabled=false;
                }
                else{
                    $("input")[8].disabled=true;
                }
            }

    //--------------------------------------------------------------------
3.ajax.js view plaincopy to clipboardprint?
function checkcode(regcode){       
    var xmlhttp;   
    try{   
        xmlhttp=new XMLHttpRequest();   
        }   
    catch(e){   
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   
        }   
    xmlhttp.onreadystatechange=function(){   
    if (xmlhttp.readyState==4){   
        if (xmlhttp.status==200){   
            var data=xmlhttp.responseText;   
            code_result(data);   
            }   
        else{   
            $("span")[4].innerHTML="驗(yàn)證碼校驗(yàn)失敗,請(qǐng)聯(lián)系管理員";   
            }   
        }   
    else{   
        $("span")[4].innerHTML="正在進(jìn)行驗(yàn)證碼校驗(yàn)...";   
        }   
    }   
    xmlhttp.open("post", "check_code.asp", true);   
    xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');   
    xmlhttp.send("regcode="+escape(regcode));   
}   
function code_result(data){   
    var resultbox=$("span")[4];   
    if(data==1){   
        resultbox.innerHTML='<IMG src="yesok.gif"> 驗(yàn)證碼正確';   
        flag[5]=1;   
        check_data();   
        }   
    else{   
        resultbox.innerHTML='<IMG src="yesno.gif"> 驗(yàn)證碼錯(cuò)誤';   
        flag[5]=0;   
        check_data();   
        }   
}   

//--------------------------------------------------------------------   
function checkid(regid){       
    var xmlhttp;   
    try{   
        xmlhttp=new XMLHttpRequest();   
        }   
    catch(e){   
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   
        }   
    xmlhttp.onreadystatechange=function(){   
    if (xmlhttp.readyState==4){   
        if (xmlhttp.status==200){   
            var data=xmlhttp.responseText;   
            id_result(data);   
            }   
        else{   
            $("span")[0].innerHTML="用戶(hù)名檢測(cè)失敗,請(qǐng)聯(lián)系管理員";   
            }   
        }   
    else{   
        $("span")[0].innerHTML="正在進(jìn)行用戶(hù)名校驗(yàn)...";   
        }   
    }   
    xmlhttp.open("post", "check_id.asp", true);   
    xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');   
    xmlhttp.send("regid="+escape(regid));   
}   
function id_result(data){   
    var resultbox=$("span")[0];   
    if(data==1){   
        resultbox.innerHTML='<IMG src="yesok.gif"> 用戶(hù)名可用';   
        flag[4]=1;   
        check_data();   
        }   
    else{   
        resultbox.innerHTML='<IMG src="yesno.gif"> 該用戶(hù)名已經(jīng)被注冊(cè)';   
        flag[4]=0;   
        check_data();   
    }   
}   

//--------------------------------------------------------------------   
function sendinfo(regname,pwd,email){   
    var xmlhttp;   
    try{   
        xmlhttp=new XMLHttpRequest();   
        }   
    catch(e){   
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   
        }   
    xmlhttp.onreadystatechange=function(){   
    if (xmlhttp.readyState==4){   
        if (xmlhttp.status==200){   
            var data=xmlhttp.responseText;   
            reg_result(data);   
            }   
        else{   
            $("span")[5].innerHTML="注冊(cè)失敗,請(qǐng)聯(lián)系管理員";   
            }   
        }   
    else{   
        $("span")[5].innerHTML="正在進(jìn)行用戶(hù)名注冊(cè)...";   
        }   
    }   
    xmlhttp.open("post", "reg.asp", true);   
    xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');   
    xmlhttp.send("regname="+escape(regname)+"&pwd="+escape(pwd)+"&email="+escape(email));   
}   
function reg_result(data){   
    if(data==1){   
        $("span")[5].innerHTML='<A ;   
        }   
    else{   
        $("span")[5].innerHTML="注冊(cè)失敗,請(qǐng)聯(lián)系管理員";   
    }   
    }  
*這里是所有文件的打包下載(包括所有文件,圖片,數(shù)據(jù)庫(kù)等,解壓后請(qǐng)?jiān)贗IS下測(cè)試)
良好體驗(yàn)度的注冊(cè)系統(tǒng).rar

相關(guān)文章

最新評(píng)論