仿照支付宝注册效果

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title >  Check Form </ title >

  < style  type ="text/css" > ...
    body {...}{
    font-family: "Arial", "Helvetica", "sans-serif" ;
    font-size: 11.5px;
    }
    div {...}{
    display: block;
    padding: 5px 0;
    text-align:left;
    margin:5px 10px;
    width:700px;
    }
    input {...}{
    padding:2px 8px 0px 3px;
    border-top-width:1px;
    border-left-width:1px;
    border-right-width:1px solid #ccc;
    border-bottom-width:1px solid #ccc;
    margin-right:5px;
    }
    .txtarea{...}{
        font-size:11.5px;
        width:500px;
        height:300px;
        display:none;
        margin-left:160px;
        border-top-width:1px;
        border-left-width:1px;
        border-right-width:1px solid #ccc;
        border-bottom-width:1px solid #ccc;
        overflow:auto;         
    }
    label {...}{ 
    float:left;
    text-align:right;display:block;
    width:150px; padding:2px 8px 0px 3px;
    }
    .reg{...}{
        font-size:11.5px;
        font-weight:bold;
        border-bottom: 1px solid #CCCCEE;
        padding-bottom:5px;
        width:700px;
        margin:10px;
    }
    .divstyle
    {...}{
        border:1px solid #CCCCEE;
        background-color:#EEEEFF;
        display: block;
        padding: 5px 0;
        text-align:left;
        margin:5px 10px;
        width:700px;
    }
    .subBtn{...}{
        border:1px solid #ccc;
        color:#333;
        background-color:#EEEEFF;
        text-align:center;
    }
    .eName{...}{
        color:#000;
        background:#e2f5ff url([img]http://www.bluekevin.com/images/ok.gif[/img]) no-repeat 5px 3px;
        padding:3px 3px 3px 25px;
        border:1px solid #00A8FF;
    }
    .wName{...}{
        color:#000;
        background:#FFF2E9  url([img]http://www.bluekevin.com/images/no.gif[/img]) no-repeat 5px 3px;
        padding:3px 3px 3px 25px;
        border:1px solid #FF6600;
    }
    .rName {...}{
        color:#000;
        /**//*background:#e2f5ff url([img]http://www.bluekevin.com/images/yes.gif[/img]) no-repeat 5px 3px;*/
        background:transparent url(images/yes.gif) no-repeat 0px 0px;
        padding:3px 3px 3px 25px;
        /**//*border:1px solid #00A8FF;*/
    }
    .txtR{...}{
        background:#FFFFFF url([img]http://www.bluekevin.com/images/input_ok_corner.gif[/img]) no-repeat scroll right top;
        border-top-width:1px;
        border-left-width:1px;
        border-right-width:1px solid #ccc;
        border-bottom-width:1px solid #ccc;
        padding:2px 3px 0px 3px;
    }
    .txtW{...}{
        background:#FFFFFF url([img]http://www.bluekevin.com/images/input_warning_corner.gif[/img]) no-repeat scroll right bottom;
        border-top-width:1px;
        border-left-width:1px;
        border-right-width:1px solid #ccc;
        border-bottom-width:1px solid #ccc;
        padding:2px 3px 0px 3px;
    }    
    .txtE{...}{
        background:#FFFFFF url([img]http://www.bluekevin.com/images/input_error_corner.gif[/img]) no-repeat scroll right bottom;
        border-top-width:1px;
        border-left-width:1px;
        border-right-width:1px solid #ccc;
        border-bottom-width:1px solid #ccc;
        padding:2px 3px 0px 3px;
    }            
  </ style >
  < script   type ="text/javascript"  language ="javascript"   > ...
     function $(id)...{return document.getElementById(id);}
     function $F(id)...{return document.getElementById(id).value;}
     function $N(name)...{return document.getElementsByTagName(name)}
    /**//*
                author:kevin
                email:kevin_218@163.com
                msn:xiao-[email]kevin@hotmail.com[/email]
                    */
     function isName(s)  
     ...{  
     var patrn=/^(w)...{6,16}$/;  
     if (!patrn.exec(s)) ...{return false;}  
     return true;  
     }
        
        function checkName()
        ...{
        
            if($F('name')=="")
            ...{
                with($('nameMsg'))
                ...{
                    innerHTML="Please enter this";
                    className="eName";
                    
                }    
                $('name').className='txtW';
                $('name').parentNode.className="divstyle";
            }    
            else    if($F('name')!=="" &&!isName($F('name')))
            ...{
                with($('nameMsg'))
                ...{
                    innerHTML="Enter between 6 and 16 characters (A-Z, a-z, 0-9,_ ,).";
                    className="wName";
                    
                }
                //$('name').focus();
                $('name').className='txtE';
                $('name').parentNode.className="divstyle";
                return false;
            }
            else
            ...{
                with($('nameMsg'))
                ...{
                    innerHTML=" ";
                    className="rName";
                    
                }
                $('name').className='txtR';
                $('name').parentNode.className="";
                return true;
            }
        }
        
        function checkPwd()
        ...{
            if($F('pwd')=="")
            ...{
                with($('pwdMsg'))
                ...{
                    innerHTML="Please enter this";
                    className="eName";
                
                }
                $('pwd').className='txtW';
                $('pwd').parentNode.className="divstyle";
            }    
            else    if($F('pwd')!=="" &&!isName($F('pwd')))
            ...{
                with($('pwdMsg'))
                ...{
                    innerHTML="Enter between 6 and 16 characters (A-Z, a-z, 0-9,_ ,).";
                    className="wName";
                    
                }
                //$('pwd').focus();
                $('pwd').className='txtE';
                $('pwd').parentNode.className="divstyle";
                return false;
            }
            else
            ...{
                with($('pwdMsg'))
                ...{
                    innerHTML=" ";
                    className="rName";        
                }
                $('pwd').className='txtR';
                $('pwd').parentNode.className="";
                return true;
            }
        }

        function checkPwd2()
        ...{
            if($F('pwd2')=="")
            ...{
                with($('pwdMsg2'))
                ...{
                    innerHTML="请输入";
                    className="eName";        
                }
                $('pwd2').className='txtW';
                $('pwd2').parentNode.className="divstyle";
            }    
            else    if($F('pwd2')!=="" &&!isName($F('pwd2')))
            ...{
                with($('pwdMsg2'))
                ...{
                    innerHTML="密码介于6~16个字符之间 字符包含(A-Z, a-z, 0-9,_ ,).";
                    className="wName";
                }
                //$('pwd2').focus();
                $('pwd2').className='txtE';
                $('pwd2').parentNode.className="divstyle";
                return false;
                
            } else if($F('pwd2')==$F('pwd'))
            ...{
                with($('pwdMsg2'))
                ...{
                    innerHTML=" ";
                    className="rName";    
                }
                $('pwd2').className='txtR';
                $('pwd2').parentNode.className="";
                return true;
            }
            else
            ...{
                with($('pwdMsg2'))
                ...{
                    innerHTML="Please confirm the pasword";
                    className="eName";
                }
                //$('pwd2').focus();
                $('pwd2').className='txtE';
                $('pwd2').parentNode.className="divstyle";
                return false;
            }
            
        }
        
        function inputLoadOk()
        ...{
            var elm = $N('input');
            for( i=0; i<elm.length;i++)
            ...{
                if(elm[i].type != "button" && elm[i].type != "submit" && elm[i].type != "reset"&&elm[i].type!="checkbox")
                ...{
                    elm[i].className="txtW";
                    //elm[i].nextSibling.innerHTML="txtW";
                    //alert(elm[i].nextSibling.innerHTML)
                }
            }        
        }

    function infoClick()
    ...{
            if($('info').checked)
            ...{
                $('btnSub').disabled   =   false;
                $('txtinfo').style.display='block';
                //$('info').className='txtE';
                $('info').parentNode.className="divstyle";
                return true;
            }
            else
                $('btnSub').disabled   =   true;
                $('txtinfo').style.display='none'
                $('info').parentNode.className="";
                return false;
    }


    function checkForm()
    ...{
        alert("go to method");
        if(checkName()&&checkPwd()&&checkPwd2()&&infoClick())
        ...{
            alert("go to method");
        }
    }
    
  </ script >
</ head >
    
< body  onload ="inputLoadOk()" >
< form >
< h2  class ="reg" > 用户注册 </ h2 >
< div >
     < label  for ="name" > 用户名： </ label >
     < input  type ="text"  id ="name"   value =""  maxlength ="16"  onblur ="checkName()" />< span  id ="nameMsg"   ></ span >
</ div >
< div >
     < label  for ="pwd" > 密码： </ label >
     < input   type ="password"  id ="pwd"  valye =""  maxlength ="16"  onblur ="checkPwd()" />< span  id ="pwdMsg" ></ span >
</ div >
< div >
     < label  for ="pwd2" > 再输一次： </ label >
     < input  type ="password"  id ="pwd2"  value =""  maxlength ="16"  onblur ="checkPwd2()" />< span  id ="pwdMsg2" ></ span >
</ div >
< div >
     < label >   </ label >
     < input  type ="checkbox"  id ="info"   name ="info"  value =""  onclick ="infoClick()" />< span >  Agree to the following terms and confirm registration < span >
     <!-- <label>&nbsp;</label> -->
     < textarea  id ="txtinfo"    class ="txtarea" > 用户注册协议
[.用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议
用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议
</ textarea >
</ div >
< div >
     < label >   </ label >
     < input  type ="button"  class ="subBtn"  id ="btnSub"  disabled  value ="注册"  onclick ="checkForm()" >
</ div >
</ form >
</ body >

</ html >