js實現註冊驗證__javascript

常用的Regex大全:http://blog.csdn.net/onebigday/article/details/5429868
Regex在資訊的匹配，驗證上起很大的作用。
深入理解Regexhttp://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>