JavaScript正則驗(yàn)證密碼強(qiáng)弱度的實(shí)現(xiàn)方法
密碼強(qiáng)弱度分析
密碼由數(shù)字,字母,特殊符號(hào)組成
密碼: 只有數(shù)字- 或者是只有字母,或者是只有特殊符號(hào)——1級(jí)：弱 兩兩組合: 數(shù)字和字母, 數(shù)字和特殊符號(hào), 字母和特殊符號(hào)——2級(jí)：中 三者都有: 數(shù)字和字母和特殊符號(hào)——3級(jí)：強(qiáng)代碼版本一：基本
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title></head><style type='text/css'> #dv{ width: 300px; height:200px; position: absolute; left:100px; top:100px; } .strengthLv0 { height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; } .strengthLv1 { background: red; height: 6px; width: 40px; border: 1px solid #ccc; padding: 2px; } .strengthLv2 { background: orange; height: 6px; width: 80px; border: 1px solid #ccc; padding: 2px; } .strengthLv3 { background: green; height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; }</style><body><div id='dv'> <label for='password'>密碼</label> <input type='text' maxlength='16'> <div> <b>密碼強(qiáng)度：</b> <em id='strength'></em> <div class='strengthLv0'></div> </div></div><script> function my$(id) { return document.getElementById(id); }<script> //獲取文本框注冊(cè)鍵盤抬起事件 my$('password').onkeyup=function () { //每次鍵盤抬起都要獲取文本框中的內(nèi)容,驗(yàn)證文本框中有什么東西,得到一個(gè)級(jí)別,然后下面的div顯示對(duì)應(yīng)的顏色 //如果密碼的長度是小于6的,沒有必要判斷 if(this.value.length>=6){ var lvl=getLvl(this.value); if(lvl==1){ //弱 my$('strengthLevel').className='strengthLv1'; }else if(lvl==2){ my$('strengthLevel').className='strengthLv2'; }else if(lvl==3){ my$('strengthLevel').className='strengthLv3'; }else{ my$('strengthLevel').className='strengthLv0'; } }else{ my$('strengthLevel').className='strengthLv0'; } }; //給我密碼,我返回對(duì)應(yīng)的級(jí)別 function getLvl(password) { var lvl=0;//默認(rèn)是0級(jí) //密碼中是否有數(shù)字,或者是字母,或者是特殊符號(hào) if(/[0-9]/.test(password)){ lvl++; } //判斷密碼中有沒有字母 if(/[a-zA-Z]/.test(password)){ lvl++; } //判斷密碼中有沒有特殊符號(hào) if(/[^0-9a-zA-Z_]/.test(password)){ lvl++; } return lvl;//1 3 }</script></body></html>
上面代碼有點(diǎn)冗余，我們對(duì)其進(jìn)行升級(jí)改寫
版本二：升級(jí)
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title></head><style type='text/css'> #dv{ width: 300px; height:200px; position: absolute; left:100px; top:100px; } .strengthLv0 { height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; } .strengthLv1 { background: red; height: 6px; width: 40px; border: 1px solid #ccc; padding: 2px; } .strengthLv2 { background: orange; height: 6px; width: 80px; border: 1px solid #ccc; padding: 2px; } .strengthLv3 { background: green; height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; }</style><body><div id='dv'> <label for='password'>密碼</label> <input type='text' maxlength='16'><!--課外話題--> <div> <b>密碼強(qiáng)度：</b> <em id='strength'></em> <div class='strengthLv0'></div> </div></div><!-- <script src='http://www.gepszalag.com/bcjs/common.js'></script> --><script> function my$(id) { return document.getElementById(id); } //獲取文本框注冊(cè)鍵盤抬起事件 my$('password').onkeyup=function () { //每次鍵盤抬起都要獲取文本框中的內(nèi)容,驗(yàn)證文本框中有什么東西,得到一個(gè)級(jí)別,然后下面的div顯示對(duì)應(yīng)的顏色 my$('strengthLevel').className='strengthLv'+(this.value.length>=6?getLvl(this.value) :0); }; //給我密碼,我返回對(duì)應(yīng)的級(jí)別 function getLvl(password) { var lvl=0;//默認(rèn)是0級(jí) //密碼中是否有數(shù)字,或者是字母,或者是特殊符號(hào) if(/[0-9]/.test(password)){ lvl++; } //判斷密碼中有沒有字母 if(/[a-zA-Z]/.test(password)){ lvl++; } //判斷密碼中有沒有特殊符號(hào) if(/[^0-9a-zA-Z_]/.test(password)){ lvl++; } return lvl;//最小的值是1,最大值是3 }</script></body></html>
到此這篇關(guān)于JavaScript正則驗(yàn)證密碼強(qiáng)弱度的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)JavaScript正則密碼強(qiáng)弱度內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. .NET中l(wèi)ambda表達(dá)式合并問題及解決方法2. JSP數(shù)據(jù)交互實(shí)現(xiàn)過程解析3. 淺談python出錯(cuò)時(shí)traceback的解讀4. 利用promise及參數(shù)解構(gòu)封裝ajax請(qǐng)求的方法5. Python importlib動(dòng)態(tài)導(dǎo)入模塊實(shí)現(xiàn)代碼6. python matplotlib:plt.scatter() 大小和顏色參數(shù)詳解7. windows服務(wù)器使用IIS時(shí)thinkphp搜索中文無效問題8. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向9. 在Android中使用WebSocket實(shí)現(xiàn)消息通信的方法詳解10. Nginx+php配置文件及原理解析
網(wǎng)公網(wǎng)安備