<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            font: 12px/1.5 "宋体","Arial","sans-serif","Tahoma";
            color: #ccc;

        }
        input,img,label{
            vertical-align: middle;
        }
                form{
            width: 740px;
            height: 500px;
            margin: 100px auto;
        }
        form div {
            overflow: hidden;
            clear: both;
        }

        form div label {
            float: left; 
            clear: both;
        }
        form div label .text {
            width: 152px;
            height: 26px;
            padding: 0 2px;
            border: 1px solid #ccc;
        }

        form div label b {
            font-size: 12px;
            color: #ccc;
            visibility: hidden;
        }

        form div em {
            display: inline-block;
            font-size: 12px;
            text-align: center;
            color: #fff;
            vertical-align: middle;
            width: 53px;
            height: 15px;
            line-height: 15px;

            background-color: #FFD009;
        }

        form div .active {
            background-color: #F60;
        }

        div span {
            display: inline-block;
            width: 80px;
            text-align: right;
        }

        .submitBtn {
            width: 135px;
            height: 33px;
            color: #ccc
        visibility: #fff;
            margin: 20px 0 0 80px;
        }
        
        .changeImg {
            width: 22px;
            height: 22px;
            display: inline-block;
            vertical-align: middle;
        }
        .msg {
            line-height: 12px ;
            color: #999
        margin-left: 5px;
            display: none;
        }

        .msg i {
            display: inline-block;
            vertical-align: middle;
            width: 25px;
            height: 20px;

            }

        .msg .ati{background-position: 0 -71px;}
        .msg .err{background-position: 0 -39px;}
        .msg .ok{background-position: 0 -99px;}
    </style>
</head>
<body>
<form action="">
    <div>
        <label >
            <span>
                会员名:
            </span>
            <input type="text" class="text"/>
        </label>
        <p class="msg">
                <i class="ati"></i>
                5-25个字符,一个汉字为两个字符,推荐使用中文会员名
        </p>
        </div>
    <div>
        <label>
            <span></span>
            <b id="count">0个字符</b>
        </label>
    </div>
    <div><label>
        <span>登录密码:</span>
        <input type="password" class="text"/>
    </label>
        <p class="msg">
            <i class="err"></i>
            5-25个字符,一个汉字为两个字符,推荐使用中文会员名
        </p>
    </div>
    <div style="margin: 3px 0 10px 0">
        <label>
            <span></span>
            <em class="active">弱</em>
             <em>中</em>
            <em>强</em>
        </label>
    </div>
    <div style="margin-bottom: 20px">
        <label>
            <span>
                确认密码:
            </span>
            <input type="password" class="text" disabled=""/>
        </label>
        <p class="msg">
            <i class="ati"></i>
            请在输入一次
        </p>
    </div>
    <div>
        <label>
        <span>
            验证码:
        </span>
            <input type="text" class="text" style="width: 50px"/>
            <img src="" alt="" width="100" height="30"/>
            <a href="javascript:;" class="changeimg" title="重新获取验证码"></a>
    </label>
    </div>
    <div>
        <input type="submit" class="submitBtn btn" value="同意协议并注册"/>
    </div>
</form>
<script>
    function getLength(str){//输入字符的长度
         return str.replace(/[^\x00-\xff]/g,'xx').length;
    }
    //判断字符是否相等
    function findStr(str,n){
        var tmp=0;
        for(var i=0;i<str.length;i++){
            if(str.charAt(i)==n){
                tmp++
            }
        }
        return tmp;
    }
    window.onload=function(){
        //取标签
        var oInput=document.getElementsByTagName("input");
        var oName=oInput[0];
        var pwd=oInput[1];
        var pwd2=oInput[2];
        var oP=document.getElementsByTagName("p");
        var name_msg=oP[0];
        var pwd_msg=oP[1];
        var pwd2_msg=oP[2];
        var count=document.getElementById("count");
        var oEm=document.getElementsByTagName("em");
        var name_length=0;
        //用户名的匹配
        //   1.数字、字母、(不区分大小写)、汉字、下划线
        //   2.5-25个字符,推荐使用中文会员名

        //a-zA-Z用\w
        var re=/[^\w\u4e00-\u9fa5]/g;//匹配所以非法字符
        //添加事件 用户名
        oName.onfocus=function(){//用户获得焦点时
            name_msg.style.display="block";
            name_msg.innerHTML="<i class='ati'></i>5-25个字符,一个汉字为2个字符,推荐使用中文会员名。"
            if(name_length==0){
                count.style.visibility="hidden";
            }
        };
        oName.onkeyup=function(){//用户输入时
            count.style.visibility="visible";
            name_length=getLength(this.value);
            count.innerHTML=name_length+"个字符"
        };
        oName.onblur=function(){//用户离开时
            var re=/[^\w\u4e00-\u9fa5]/g;//匹配所以非法字符
            if(re.test(this.value)){
                name_msg.innerHTML="<i class='err'></i>含有非法字符"
            }
            else if(this.value==""){
                name_msg.innerHTML="<i class='err'></i>不能为空"

            }
            else if(name_length>25){
                name_msg.innerHTML="<i class='err'></i>长度不能超过25个字符"
            }
            else if(name_length<6){
                name_msg.innerHTML="<i class='err'></i>长度不能少于6个字符"
            }
            else{
                name_msg.innerHTML="<i class='ok'></i>ok"
            }

        };
        //密码
        pwd.onfocus=function(){
            pwd_msg.style.display="block";
            pwd_msg.innerHTML="<i class='ati'></i>6-16个字符,请使用字母加数字或符号的组合密码,不能单独使用字母、数字或符号。"


        };
        pwd.onkeyup=function(){
            if(this.value.length>5){//当长度大于5时激活active
                oEm[1].className="active";
                pwd2.removeAttribute("disabled");//去掉禁用属性
                pwd2_msg.style.display="block";//显示后面的文字
            }
            else{//但删除密码长度时的动作
                oEm[1].className="";
                pwd2.setAttribute("disabled");//添加禁用属性
                 pwd2_msg.style.display="none";//隐藏后面的文字
            }
            //密码长度大于10
            if(this.value.length>10){//当长度大于5时激活active
                oEm[2].className="active";
                }else{//但删除密码长度时的动作
                oEm[2].className="";

            }

        };
        pwd.onblur=function(){
            var m=findStr(pwd.value,pwd.value[0]);
            var re_n=/[^\d]/g;//非数字
            var re_t=/[^a-zA-z]/g;
            //不能为空
            if(this.value==""){
                pwd_msg.innerHTML="<i class='err'></i>不能为空!"
            }
            //不能有相同字符
            else if(m==this.value.length){
                pwd_msg.innerHTML="<i class='err'></i>不能用相同字符!"
            }
            //长度为6-16
             else if(this.value.length<6||this.value.length>16){
                pwd_msg.innerHTML="<i class='err'></i>长度应为6-16个字符!"

            }
            //不能全为数字
            else if(!re_n.test(this.value)){
                pwd_msg.innerHTML="<i class='err'></i>不能全为数字!"

            }
            //不能全为字母
            else if(!re_t.test(this.value)){
                pwd_msg.innerHTML="<i class='err'></i>不能全为字母!"

            }
            //0k
            else{
                pwd_msg.innerHTML="<i class='ok'></i>ok"
            }

        };

        //确认密码

        pwd2.onfocus=function(){//获得焦点
        if(this.value!=pwd.value){
            pwd2_msg.innerHTML="<i class='err'></i>两次输入的密码不一致!"
        }else{
            pwd2_msg.innerHTML="<i class='ok'></i>ok"
        }
        };
    }
</script>
</body>
</html>