                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /表單驗證

貼個源碼了

html代碼部分

<!DOCTYPE?html><html><head><meta?charset="utf-8"?/><meta?http-equiv="X-UA-Compatible"?content="IE=edge"><title>淘寶用戶注冊</title><meta?name="viewport"?content="width=device-width,?initial-scale=1"><link?rel="stylesheet"?type="text/css"?media="screen"?href="../表單驗證/css/style.css"?/><script?src="../表單驗證/js/script.js"></script></head><body><form?action=""><div><label?for=""><span?class="title">會員名：</span><input?type="text"?class="text"></label><p?class="msg"><i?class="ati"></i>5-25個字符，1個漢字為兩個字符，推薦使用中文會員名</p></div><div><label?for=""><span></span><b?id="count">0個字符</b></label></div><div><label?for=""><span?class="title">登錄密碼：</span><input?type="password"?class="text"></label><p?class="msg"><i?class="ati"></i></p></div><div?id="tips"><label?for=""><span></span><em?class="active">弱</em><em>中</em><em>強</em></label></div><div?class="margin"><label?for=""><span?class="title">確認密碼：</span><input?type="password"?class="text"?disabled="false"></label><p?class="msg"><i?class="ati"></i>請再輸入一次</p></div><div?class="margin"><label?for=""><span?class="title">驗證碼：</span><input?type="text"?class="text?checkimg"></label><img?src="../表單驗證/images/1.png"><a?href="javascript:;"class="changeImg"?title="重新獲取驗證碼"></a></div><div?class="margin"><input?type="submit"?id="submitBtn"?class="submitBtn?btn"?value="同意協(xié)議并注冊"></div></form></body></html>

css代碼部分

form{width:?600px;margin:?100px?auto;}input{width:?160px;height:?26px;line-height:?26px;font-size:?14px;font-family:?"微軟雅黑"；}.title{display:?inline-block;width:?80px;text-align:?right;}p{display:?none;font-size:?12px;color:?gray;width:?300px;float:?right;line-height:?28px;vertical-align:?top;margin:?2px?30px?0?0;}#count{padding-left:?80px;font-size:?12px;color:?gray;line-height:?28px;visibility:?hidden;}em{display:?inline-block;width:?54px;height:?20px;background-color:?rgb(255,?204,?157);margin-right:?2px;font-size:?12px;font-style:?normal;text-align:?center;height:?14px;line-height:?14px;color:?white;}.active{background-color:?rgb(255,?95,?2);}#tips{padding-left:?82px;}img{height:?30px;vertical-align:?middle;}.checkimg{width:?100px;}#submitBtn{border:?1px?solid?rgb(255,?95,?2);width:?166px;height:?30px;background-color:?rgb(255,?95,?2);color:?white;margin-left:?80px;}.margin{margin-top:?20px;}.msg{display:?none;}.err{display:?inline-block;width:?14px;height:?14px;background:?url(../images/no.jpg)?no-repeat?center?center?;vertical-align:?middle;}.ati{display:?inline-block;width:?14px;height:?14px;background:?url(../images/ati.png)?no-repeat?center?center?;vertical-align:?middle;}.ok{display:?inline-block;width:?14px;height:?14px;background:?url(../images/ok.png)?no-repeat?center?center?;vertical-align:?middle;}

js代碼部分

window.onload?=?function?()?{var?oInputs?=?document.getElementsByTagName('input');var?oName?=?oInputs[0];var?pwd?=?oInputs[1];var?pwdCon?=?oInputs[2];var?oPs?=?document.getElementsByTagName('p');var?name_msg?=?oPs[0];var?pwd_msg?=?oPs[1];var?pwdCon_msg?=?oPs[2];var?name_count?=?document.getElementById('count');var?oEms?=?document.getElementsByTagName('em');var?name_length?=?0;
//用戶名檢查
oName.onfocus?=?function?()?{name_msg.style.display?=?"block";name_msg.innerHTML?=?'<i?class="ati"></i>5-25個字符，1個漢字為兩個字符，推薦使用中文會員名';}oName.onkeyup?=?function?()?{name_count.style.visibility?=?'visible';name_length?=?getLength(this.value);if?(name_length?>?0)?{name_count.innerHTML?=?name_length?+?'個字符';}?else?{name_count.style.visibility?=?'hidden';}}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>不能為空！';}
//長度超過25字符
else?if?(getLength(this.value)?>?25)?{name_msg.innerHTML?=?'<i?class="err"></i>不能超過25個字符！';}
//長度少于6個字符
else?if?(getLength(this.value)?<?6)?{name_msg.innerHTML?=?'<i?class="err"></i>不能少于6個字符！';}//OK?
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個字符，請使用字母加數(shù)字或符號的組合密碼，不能單獨使用字母、數(shù)字或符號';}pwd.onkeyup?=?function?()?{
//大于5個字符為“中”
if?(getLength(this.value)?>?5)?{for?(var?i?=?0;?i?<?oEms.length;?i++)?{oEms[i].className?=?'';}oEms[1].className?=?'active';pwdCon.disabled?=?false;pwdCon_msg.style.display?=?'block';}
//?大于10個字符為“強”
if?(getLength(this.value)?>?10)?{for?(var?i?=?0;?i?<?oEms.length;?i++)?{oEms[i].className?=?'';}oEms[2].className?=?'active';pwdCon.disabled?=?false;pwdCon_msg.style.display?=?'block';}
//小于5個字符為“弱”
if?(getLength(this.value)?<=?5)?{for?(var?i?=?0;?i?<?oEms.length;?i++)?{oEms[i].className?=?'';}oEms[0].className?=?'active';pwdCon.disabled?=?true;pwdCon.value?=?'';pwdCon_msg.style.display?=?'none';}}pwd.onblur?=?function?()?{var?pwdValue?=?this.value;var?strLen?=?repeatStr(pwdValue,?pwdValue.charAt(0));var?re_n?=?/[^\d]/g;var?re_w?=?/[^a-zA-Z_]/g;if?(pwdValue.length?<?6?||?pwdValue.length?>?16)?{pwd_msg.innerHTML?=?'<i?class="err"></i>長度應(yīng)為6-16之間！';}?else?if?(strLen?==?pwdValue.length)?{pwd_msg.innerHTML?=?'<i?class="err"></i>不能使用相同字符！';}?else?if?(pwdValue?==?'')?{pwd_msg.innerHTML?=?'<i?class="err"></i>不能為空';}?else?if?(!re_n.test(pwdValue))?{pwd_msg.innerHTML?=?'<i?class="err"></i>不能全為數(shù)字';}?else?if?(!re_w.test(pwdValue))?{pwd_msg.innerHTML?=?'<i?class="err"></i>不能全為字母';}?else?{pwd_msg.innerHTML?=?'<i?class="ok"></i>OK！';}}
//確認密碼輸入框檢查
pwdCon.onblur?=?function?()?{if?(this.value?!=?pwd.value)?{pwdCon_msg.innerHTML?=?'<i?class="err"></i>兩次輸入的密碼不一致！';}?else?{pwdCon_msg.innerHTML?=?'<i?class="ok"></i>OK！';}}
//?檢查字符串是否完全由一個字符組成
function?repeatStr(str,?chr)?{var?len?=?0;for?(var?i?=?0;?i?<?str.length;?i++)?{if?(str.charAt(i)?==?chr)?{len++;}}return?len;}
//??檢查返回字符串的字節(jié)長度，處理雙字節(jié)字符長度
function?getLength(str)?{return?str.replace(/[^\x00-xff]/g,?'xx').length;}}