js实现注册验证

常用的正则表达式大全:http://blog.csdn.net/onebigday/article/details/5429868
正则表达式在信息的匹配，验证上起很大的作用。
深入理解正则表达式http://www.cnblogs.com/China3S/archive/2013/11/30/3451971.html

这里记录一下学习js实现注册验证的小例子。新手勿喷【捂脸】。

一：css样式文件

*{
            margin: 0px;
            padding: 0px;
        }
        body{
            font-size: 16px;
            font-family: "微软雅黑","sans-serif","Arail";
        }
        form{
            width: 800px;
            height: 200px;
            padding-top: 100px;
            margin: 0 auto;
        }
        p{
            display: inline-block;
            margin-left: 10px;
            font-size: 12px;
            display: none;
        }
        #count{
            visibility: hidden;
            font-size: 14px;
            color: #666;
            margin-left: 90px;
        }
        i{
            width: 80px;
            height: 20px;
            display: inline-block;
        }
        em{
            background: #ffd099;
            width: 50px;
            height: 20px;
            color: #fff;
            font-weight: 800;
            line-height: 20px;
            text-align: center;
            display: inline-block;

        }
        .active{
            background:#ff6600;

        }
        .btnsubmit{
            margin-left: 80px;
            width: 12n0px;
            height: 30px;
            background: #ff6600;
            color: #fff;
            font-weight: 800;
            border:none;
            cursor: pointer;
            margin-top: 15px;
        }

二：主体部分

<form >
<div>
  <label><span>会员注册：</span>
  <input type="text" name="username" class="text">
  <p class="msg"><i></i>5-25个字符，汉字为两个字符，推荐使用中文会员名</p>
  </label>
</div>
<div><span></span><label><b id="count">0个字符</b></label></div>
<div><label><span>登录密码：</span>
  <input type="text" name="password" class="text">
  <p class="msg"><i></i>5-25个字符，汉字为两个字符，推荐使用中文会员名</p>
  </label>
</div>
<div><span></span><em class="active">弱</em><em>中</em><em>强</em></div>
<div><label><span>确认密码：</span>
  <input type="text" class="text" disabled="">
  <p class="msg"><i></i>请再输入一次密码确认</p>
  </label>
</div>
<div><input class="submitBtn" type="submit" value="同意协议并注册"></div>
</form>

三，Javascript部分

<script type="text/javascript">

        function getLength(str){
            return  str.replace(/\u4e00-\u9fa5/g,"xx").length;
        }
        function findStr(str,n){
            var temp=0;
            for (var i = 0; i < str.length; i++) {
                if (str.charAt(i)==n) {
                    temp++;
                }
            }
            return temp;
        }
        window.onload=function(){
            //获取元素
            var allinput=document.getElementsByTagName("input");

            var username=allinput[0];
            var pwd=allinput[1];
            var checkPwd=allinput[2];

            var allP=document.getElementsByTagName("p");
            var username_msg=allP[0];
            var pwd_msg=allP[1];
            var checkPwd_msg=allP[2];

            var ems=document.getElementsByTagName("em");

            var count=document.getElementById("count");
            var name_length=0;//username的长度

            /*用户名*/
            username.onfocus=function(){
                // 得到焦点时
                username_msg.style.display='inline-block';
                username_msg.innerHTML='5-25个字符，汉字为两个字符，推荐使用中文会员名';
            }
            username.onkeyup=function(){
                //当释放键盘按钮时，计算字符数
                count.style.visibility="visible";
                name_length=getLength(this.value);
                count.innerHTML=name_length+"个字符";
                if (name_length==0) {
                    count.style.visibility="hidden";
                }
            }
            username.onblur=function(){
                var re=/[^\w\u4e00-\u9fa5]/g;
                //含有非法字符
                if (re.test(this.value)) {
                    username_msg.innerHTML="含有非法字符";
                }
                // 不能为空
                else if (name_length==0) {
                    username_msg.innerHTML="用户名不能为空！";
                }
                // 长度不在5-25个字符之间
                else if (name_length>25||name_length<5) {
                    username_msg.innerHTML="长度不在5-25个字符之间!";
                }
                // ok
                else{
                    username_msg.innerHTML="ok!";
                }
            }

            /*密码*/
            pwd.onfocus=function(){
                pwd_msg.style.display="inline-block";
                pwd_msg.innerHTML="6-16个字符，必须是字母加数字";
            }
            pwd.onkeyup=function(){
                //根据密码的长度判断其强度
                //如果长度大于6-中
                if (this.value.length>6) {
                    ems[1].className="active";
                    checkPwd.removeAttribute("disabled");
                    checkPwd_msg.style.display='inline-block';
                }else{
                    ems[1].className="";
                    checkPwd.setAttribute("disabled","true");
                    checkPwd_msg.style.display='none';
                }
                // 如果长度大于10-强
                if (this.value.length>10) {
                    ems[2].className="active";
                }else{
                    ems[2].className="";
                }
            }
            pwd.onblur=function(){
                var re_d=/[^\d]/g;
                var re_a=/[^a-zA-Z]/g;
                var m=findStr(pwd.value,pwd.value[0]);
                //密码不能为空
                if (this.value="") {
                    pwd_msg.innerHTML="密码不能为空";
                }
                // 不能全部为数字
                else if (!re_d.test(this.value)) {
                    pwd_msg.innerHTML="密码不能都为数字！";
                }
                // 不能全部为字母
                else if (!re_a.test(this.value)) {
                    pwd_msg.innerHTML="密码不能都为字母";
                }
                // 不能全部用相同的字符
                else if (m==this.value.length) {
                    pwd_msg.innerHTML="密码不能全部用相同的字符";
                }
                // 长度在6-16之间
                else if (this.value.length>16||this.value.length<6) {
                    pwd_msg.innerHTML="密码应在长度在6-16之间";
                }
                // ok
                else{
                    pwd_msg.innerHTML="密码不能都为字母";
                }
            }

            /*确认密码*/
            checkPwd.onblur=function(){
                if (pwd.value!=checkPwd.value) {
                    checkPwd_msg.innerHTML='两次输入的密码不一致';
                }else{
                    checkPwd_msg.innerHTML='ok';
                }
            }
        }
    </script>