課程
/前端開發(fā)
/JavaScript
/表單驗證
跪求源碼~萬分感謝，yahui1518@163.com
2015-12-09
源自：表單驗證 5-1
正在回答
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>validation</title> <link?rel="stylesheet"?href="index.css"> <script?src="index.js"></script> </head> <body> <div?id="login"> <form?action=""> <div> <label> <span>會員名：</span> <input?type="text"?name="username"> </label> <span><i></i>OK</span> <p>您已經(jīng)輸入7個字符</p> </div> <div> <label> <span>登錄密碼：</span> <input?type="text"?name="password"> </label> <span><i></i>OK</span> <p><span?class="strength?strength-active">弱</span><span>中</span><span>強</span></p> </div> <div> <label> <span>確認密碼：</span> <input?type="text"?name="password2"?disabled> </label> <span><i></i>OK</span> </div> <div> <input?type="submit"?value="同意協(xié)議并注冊"> </div> </form> </div> </body> </html>
window.onload?=?function()?{ var?login?=?document.getElementById('login'); var?input?=?login.getElementsByTagName('input'); var?msg?=?login.getElementsByClassName('msg'); var?userName?=?input[0],?//?獲取用戶名輸入框 userName_msg?=?msg[0], count?=?document.getElementsByClassName('count')[0]; var?userNameTest?=?333; var?pwd?=?input[1],?//?獲取登錄密碼輸入框 pwd_msg?=?msg[1]; var?strength?=?document.getElementsByClassName('strength');?//?獲取密碼強弱程度狀態(tài)標識 var?pwd2?=?input[2],?//?獲取確認密碼輸入框 pwd2_msg?=?msg[2] var?nameLength?=?0; userName.onfocus?=?function(){ userName_msg.style.display?=?'block'; userName_msg.innerHTML?=?'請輸入8-25個字符，只限于英文，漢字，數(shù)字，下劃線，不可使用特殊符號'; } userName.onkeyup?=?function(){ nameLength?=?getLength(this.value); count.innerHTML?=?'您已經(jīng)輸入'+?nameLength?+'個字符'; if(this.value?==?'')?{ count.style.display?=?'none'; }else{ count.style.display?=?'block'; } } userName.onblur?=?function(){ //?含有非法字符 var?tes?=?/[^\w\u4e00-\u9fa5]/g;?//?\w?表示a-zA-Z?0-9?和_?這些單字符，\u4e00-\u9fa5表示中文字符 if(tes.test(this.value))?{ userName_msg.innerHTML?=?'含有非法字符'; } //?內(nèi)容為空 else?if(nameLength?==?0)?{ userName_msg.innerHTML?=?'輸入內(nèi)容不能為空'; } //?長度超過25個字符 else?if(nameLength?>?25)?{ userName_msg.innerHTML?=?'輸入內(nèi)容不能超過25個字符'; } //?長度少于6個字符 else?if(nameLength?<?6)?{ userName_msg.innerHTML?=?'輸入內(nèi)容不能少于6個字符'; } //?符合要求?OK else{ userName_msg.innerHTML?=?'OK'; } } pwd.onfocus?=?function()?{ pwd_msg.style.display?=?'block'; pwd_msg.innerHTML?=?'6-16個字符，請使用字母加數(shù)字或符號的組合，不能單獨使用字母、數(shù)字或者符號'; } pwd.onkeyup?=?function()?{ var?pwdLen?=?this.value.length; //?大于6個字符時，密碼強度為‘中’ if(pwdLen?>?6){ pwd2.removeAttribute('disabled'); pwd2_msg.style.display?=?'block'; pwd2_msg.innerHTML?=?'請再次輸入密碼' strength[1].className?=?'strength?strength-active'; }?else{ pwd2.setAttribute('disabled','true'); pwd2_msg.style.display?=?'none'; strength[1].className?=?'strength'; } //?大于12個字符時，密碼強度為‘強’ if(pwdLen?>?12){ strength[2].className?=?'strength?strength-active'; }?else{ strength[2].className?=?'strength'; } } pwd.onblur?=?function()?{ var?val?=?this.value; var?m?=?findStr(val,val[0]); var?re_n?=?/[^\d]/g;?//?除了數(shù)字以外的所有字符 var?re_l?=?/[^a-zA-Z]/g;?//?除了字母以外的所有字符 //?密碼不能為空 if(val?==?''){ pwd_msg.innerHTML?=?'密碼不能為空' } //?不能使用相同字符 else?if(m?==?val.length){ pwd_msg.innerHTML?=?'密碼不能為相同字符' } //?長度應為6-16個字符 else?if(val.length?<?6){ pwd_msg.innerHTML?=?'密碼長度應為6-16個字符' } else?if(val.length?>?16){ pwd_msg.innerHTML?=?'密碼長度應為6-16個字符' } //?不能全為數(shù)字 else?if(!re_n.test(val)){ pwd_msg.innerHTML?=?'密碼不能全為數(shù)字' } //?不能全為字母 else?if(!re_l.test(val)){ pwd_msg.innerHTML?=?'密碼不能全為字母' } //?符合要求?OK else?{ pwd_msg.innerHTML?=?'OK' } } pwd2.onblur?=?function()?{ var?pwdVal?=?pwd.value; var?pwd2Val?=?pwd2.value; if(pwdVal?==?pwd2Val)?{ pwd2_msg.innerHTML?=?'OK' }else{ pwd2_msg.innerHTML?=?'兩次輸入不一致' } } } function?getLength(str)?{ return?str.replace(/[^\x00-xff]/g,'xx').length;?//?\x00-xff?這區(qū)間都為單字節(jié) } function?findStr(str,?n)?{ var?tmp?=?0; for(var?i=0;?i<str.length;?i++){ if(str.charAt(i)?==?n){ tmp++; } } return?tmp; }
#login?div{ margin-top:?20px; } .msg,?.count{ display:?none; } .strength{ display:?inline-block; ????width:?49px; ????line-height:?20px; ????background-color:?#fc6d00; ????color:?#fff; ????text-align:?center; ????font-size:?14px; } .strength-active{ background-color:?#fc2d00; } .submit{ width:?300px; margin-top:?20px; text-align:?center; } .subBtn{ display:?inline-block; padding:?5px?8px; }
舉報
表單驗證是JavaScript中的高級選項之一，輸入框的驗證
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2015-12-22
window.onload?=?function()?{ var?login?=?document.getElementById('login'); var?input?=?login.getElementsByTagName('input'); var?msg?=?login.getElementsByClassName('msg'); var?userName?=?input[0],?//?獲取用戶名輸入框 userName_msg?=?msg[0], count?=?document.getElementsByClassName('count')[0]; var?userNameTest?=?333; var?pwd?=?input[1],?//?獲取登錄密碼輸入框 pwd_msg?=?msg[1]; var?strength?=?document.getElementsByClassName('strength');?//?獲取密碼強弱程度狀態(tài)標識 var?pwd2?=?input[2],?//?獲取確認密碼輸入框 pwd2_msg?=?msg[2] var?nameLength?=?0; userName.onfocus?=?function(){ userName_msg.style.display?=?'block'; userName_msg.innerHTML?=?'請輸入8-25個字符，只限于英文，漢字，數(shù)字，下劃線，不可使用特殊符號'; } userName.onkeyup?=?function(){ nameLength?=?getLength(this.value); count.innerHTML?=?'您已經(jīng)輸入'+?nameLength?+'個字符'; if(this.value?==?'')?{ count.style.display?=?'none'; }else{ count.style.display?=?'block'; } } userName.onblur?=?function(){ //?含有非法字符 var?tes?=?/[^\w\u4e00-\u9fa5]/g;?//?\w?表示a-zA-Z?0-9?和_?這些單字符，\u4e00-\u9fa5表示中文字符 if(tes.test(this.value))?{ userName_msg.innerHTML?=?'含有非法字符'; } //?內(nèi)容為空 else?if(nameLength?==?0)?{ userName_msg.innerHTML?=?'輸入內(nèi)容不能為空'; } //?長度超過25個字符 else?if(nameLength?>?25)?{ userName_msg.innerHTML?=?'輸入內(nèi)容不能超過25個字符'; } //?長度少于6個字符 else?if(nameLength?<?6)?{ userName_msg.innerHTML?=?'輸入內(nèi)容不能少于6個字符'; } //?符合要求?OK else{ userName_msg.innerHTML?=?'OK'; } } pwd.onfocus?=?function()?{ pwd_msg.style.display?=?'block'; pwd_msg.innerHTML?=?'6-16個字符，請使用字母加數(shù)字或符號的組合，不能單獨使用字母、數(shù)字或者符號'; } pwd.onkeyup?=?function()?{ var?pwdLen?=?this.value.length; //?大于6個字符時，密碼強度為‘中’ if(pwdLen?>?6){ pwd2.removeAttribute('disabled'); pwd2_msg.style.display?=?'block'; pwd2_msg.innerHTML?=?'請再次輸入密碼' strength[1].className?=?'strength?strength-active'; }?else{ pwd2.setAttribute('disabled','true'); pwd2_msg.style.display?=?'none'; strength[1].className?=?'strength'; } //?大于12個字符時，密碼強度為‘強’ if(pwdLen?>?12){ strength[2].className?=?'strength?strength-active'; }?else{ strength[2].className?=?'strength'; } } pwd.onblur?=?function()?{ var?val?=?this.value; var?m?=?findStr(val,val[0]); var?re_n?=?/[^\d]/g;?//?除了數(shù)字以外的所有字符 var?re_l?=?/[^a-zA-Z]/g;?//?除了字母以外的所有字符 //?密碼不能為空 if(val?==?''){ pwd_msg.innerHTML?=?'密碼不能為空' } //?不能使用相同字符 else?if(m?==?val.length){ pwd_msg.innerHTML?=?'密碼不能為相同字符' } //?長度應為6-16個字符 else?if(val.length?<?6){ pwd_msg.innerHTML?=?'密碼長度應為6-16個字符' } else?if(val.length?>?16){ pwd_msg.innerHTML?=?'密碼長度應為6-16個字符' } //?不能全為數(shù)字 else?if(!re_n.test(val)){ pwd_msg.innerHTML?=?'密碼不能全為數(shù)字' } //?不能全為字母 else?if(!re_l.test(val)){ pwd_msg.innerHTML?=?'密碼不能全為字母' } //?符合要求?OK else?{ pwd_msg.innerHTML?=?'OK' } } pwd2.onblur?=?function()?{ var?pwdVal?=?pwd.value; var?pwd2Val?=?pwd2.value; if(pwdVal?==?pwd2Val)?{ pwd2_msg.innerHTML?=?'OK' }else{ pwd2_msg.innerHTML?=?'兩次輸入不一致' } } } function?getLength(str)?{ return?str.replace(/[^\x00-xff]/g,'xx').length;?//?\x00-xff?這區(qū)間都為單字節(jié) } function?findStr(str,?n)?{ var?tmp?=?0; for(var?i=0;?i<str.length;?i++){ if(str.charAt(i)?==?n){ tmp++; } } return?tmp; }2015-12-22
#login?div{ margin-top:?20px; } .msg,?.count{ display:?none; } .strength{ display:?inline-block; ????width:?49px; ????line-height:?20px; ????background-color:?#fc6d00; ????color:?#fff; ????text-align:?center; ????font-size:?14px; } .strength-active{ background-color:?#fc2d00; } .submit{ width:?300px; margin-top:?20px; text-align:?center; } .subBtn{ display:?inline-block; padding:?5px?8px; }2015-12-22
window.onload?=?function()?{ var?login?=?document.getElementById('login'); var?input?=?login.getElementsByTagName('input'); var?msg?=?login.getElementsByClassName('msg'); var?userName?=?input[0],?//?獲取用戶名輸入框 userName_msg?=?msg[0], count?=?document.getElementsByClassName('count')[0]; var?userNameTest?=?333; var?pwd?=?input[1],?//?獲取登錄密碼輸入框 pwd_msg?=?msg[1]; var?strength?=?document.getElementsByClassName('strength');?//?獲取密碼強弱程度狀態(tài)標識 var?pwd2?=?input[2],?//?獲取確認密碼輸入框 pwd2_msg?=?msg[2] var?nameLength?=?0; userName.onfocus?=?function(){ userName_msg.style.display?=?'block'; userName_msg.innerHTML?=?'請輸入8-25個字符，只限于英文，漢字，數(shù)字，下劃線，不可使用特殊符號'; } userName.onkeyup?=?function(){ nameLength?=?getLength(this.value); count.innerHTML?=?'您已經(jīng)輸入'+?nameLength?+'個字符'; if(this.value?==?'')?{ count.style.display?=?'none'; }else{ count.style.display?=?'block'; } } userName.onblur?=?function(){ //?含有非法字符 var?tes?=?/[^\w\u4e00-\u9fa5]/g;?//?\w?表示a-zA-Z?0-9?和_?這些單字符，\u4e00-\u9fa5表示中文字符 if(tes.test(this.value))?{ userName_msg.innerHTML?=?'含有非法字符'; } //?內(nèi)容為空 else?if(nameLength?==?0)?{ userName_msg.innerHTML?=?'輸入內(nèi)容不能為空'; } //?長度超過25個字符 else?if(nameLength?>?25)?{ userName_msg.innerHTML?=?'輸入內(nèi)容不能超過25個字符'; } //?長度少于6個字符 else?if(nameLength?<?6)?{ userName_msg.innerHTML?=?'輸入內(nèi)容不能少于6個字符'; } //?符合要求?OK else{ userName_msg.innerHTML?=?'OK'; } } pwd.onfocus?=?function()?{ pwd_msg.style.display?=?'block'; pwd_msg.innerHTML?=?'6-16個字符，請使用字母加數(shù)字或符號的組合，不能單獨使用字母、數(shù)字或者符號'; } pwd.onkeyup?=?function()?{ var?pwdLen?=?this.value.length; //?大于6個字符時，密碼強度為‘中’ if(pwdLen?>?6){ pwd2.removeAttribute('disabled'); pwd2_msg.style.display?=?'block'; pwd2_msg.innerHTML?=?'請再次輸入密碼' strength[1].className?=?'strength?strength-active'; }?else{ pwd2.setAttribute('disabled','true'); pwd2_msg.style.display?=?'none'; strength[1].className?=?'strength'; } //?大于12個字符時，密碼強度為‘強’ if(pwdLen?>?12){ strength[2].className?=?'strength?strength-active'; }?else{ strength[2].className?=?'strength'; } } pwd.onblur?=?function()?{ var?val?=?this.value; var?m?=?findStr(val,val[0]); var?re_n?=?/[^\d]/g;?//?除了數(shù)字以外的所有字符 var?re_l?=?/[^a-zA-Z]/g;?//?除了字母以外的所有字符 //?密碼不能為空 if(val?==?''){ pwd_msg.innerHTML?=?'密碼不能為空' } //?不能使用相同字符 else?if(m?==?val.length){ pwd_msg.innerHTML?=?'密碼不能為相同字符' } //?長度應為6-16個字符 else?if(val.length?<?6){ pwd_msg.innerHTML?=?'密碼長度應為6-16個字符' } else?if(val.length?>?16){ pwd_msg.innerHTML?=?'密碼長度應為6-16個字符' } //?不能全為數(shù)字 else?if(!re_n.test(val)){ pwd_msg.innerHTML?=?'密碼不能全為數(shù)字' } //?不能全為字母 else?if(!re_l.test(val)){ pwd_msg.innerHTML?=?'密碼不能全為字母' } //?符合要求?OK else?{ pwd_msg.innerHTML?=?'OK' } } pwd2.onblur?=?function()?{ var?pwdVal?=?pwd.value; var?pwd2Val?=?pwd2.value; if(pwdVal?==?pwd2Val)?{ pwd2_msg.innerHTML?=?'OK' }else{ pwd2_msg.innerHTML?=?'兩次輸入不一致' } } } function?getLength(str)?{ return?str.replace(/[^\x00-xff]/g,'xx').length;?//?\x00-xff?這區(qū)間都為單字節(jié) } function?findStr(str,?n)?{ var?tmp?=?0; for(var?i=0;?i<str.length;?i++){ if(str.charAt(i)?==?n){ tmp++; } } return?tmp; }