JS正則表達式驗證密碼強度
更新時間:2020年03月18日 13:54:05 作者:夏沐_lk
這篇文章主要為大家詳細介紹了JS正則表達式驗證密碼強度,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS正則表達式驗證密碼強度的具體代碼,供大家參考,具體內(nèi)容如下
代碼1:
<!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:300px; 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="pwd">密碼</label> <input type="text" id="pwd" maxlength="16"><!--課外話題--> <div> <em>密碼強度:</em> <em id="strength"></em> <div id="strengthLevel" class="strengthLv0"></div> </div> </div> <script src="common.js"></script> <script> /* * * 密碼: 數(shù)字,字母,特殊符號 * * 密碼: 只有數(shù)字- 或者是只有字母,或者是只有特殊符號---1級---弱 * 兩兩組合: 數(shù)字和字母, 數(shù)字和特殊符號, 字母和特殊符號 -----2級----中 * 三者都有: 數(shù)字和字母和特殊符號------3級-----強 * * */ //獲取文本框注冊鍵盤抬起事件 my$("pwd").onkeyup=function () { //每次鍵盤抬起都要獲取文本框中的內(nèi)容,驗證文本框中有什么東西,得到一個級別,然后下面的div顯示對應的顏色 //如果密碼的長度是小于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"; } }; //給我密碼,我返回對應的級別 function getLvl(pwd) { var lvl=0;//默認是0級 //密碼中是否有數(shù)字,或者是字母,或者是特殊符號 if(/[0-9]/.test(pwd)){ lvl++; } //判斷密碼中有沒有字母 if(/[a-zA-Z]/.test(pwd)){ lvl++; } //判斷密碼中有沒有特殊符號 if(/[^0-9a-zA-Z_]/.test(pwd)){ lvl++; } return lvl;//1 3 } </script> </body> </html>
優(yōu)化代碼2:
<!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:300px; 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="pwd">密碼</label> <input type="text" id="pwd" maxlength="16"><!--課外話題--> <div> <em>密碼強度:</em> <em id="strength"></em> <div id="strengthLevel" class="strengthLv0"></div> </div> </div> <script src="common.js"></script> <script> //獲取文本框注冊鍵盤抬起事件 my$("pwd").onkeyup=function () { //每次鍵盤抬起都要獲取文本框中的內(nèi)容,驗證文本框中有什么東西,得到一個級別,然后下面的div顯示對應的顏色 //如果密碼的長度是小于6的,沒有必要判斷 // if(this.value.length>=6){ // var lvl= getLvl(this.value); // my$("strengthLevel").className="strengthLv"+lvl; // }else{ // my$("strengthLevel").className="strengthLv0"; // } my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0); }; //給我密碼,我返回對應的級別 function getLvl(pwd) { var lvl=0;//默認是0級 //密碼中是否有數(shù)字,或者是字母,或者是特殊符號 if(/[0-9]/.test(pwd)){ lvl++; } //判斷密碼中有沒有字母 if(/[a-zA-Z]/.test(pwd)){ lvl++; } //判斷密碼中有沒有特殊符號 if(/[^0-9a-zA-Z_]/.test(pwd)){ lvl++; } return lvl;//最小的值是1,最大值是3 } </script> </body> </html>
common.js
/** * 獲取指定標簽對象 * @param id 標簽的id屬性值 * @returns {Element}根據(jù)id屬性值返回指定標簽對象 */ function my$(id) { return document.getElementById(id); }
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
chatGPT前端流式輸出js實現(xiàn)三種方法—fetch、SSE、websocket
項目需要接入chatgpt提供的api,后端返回流式的字符,前端接收并實時顯示,在JavaScript中,使用Stream流通常指的是處理數(shù)據(jù)流的一種方式,它們允許數(shù)據(jù)被處理成塊,而不是一次性處理整個數(shù)據(jù)集,這對于處理大量數(shù)據(jù)或者來自網(wǎng)絡請求的數(shù)據(jù)非常有用,2024-07-07在javaScript中檢測數(shù)據(jù)類型的幾種方式小結
在用javaScript編程的過程中,我們經(jīng)常會遇到這樣一個問題,就是需要檢測一個數(shù)據(jù)或變量的類型,本篇文章主要介紹了在javaScript中檢測數(shù)據(jù)類型的幾種方式小結,有興趣的可以了解一下。2017-03-03基于BootStrap Metronic開發(fā)框架經(jīng)驗小結【九】實現(xiàn)Web頁面內(nèi)容的打印預覽和保存操作
本篇文章主要介紹如何實現(xiàn)Web頁面內(nèi)容的打印預覽和保存操作的相關知識,感興趣的朋友一起學習吧2016-05-05Bootstrap編寫一個兼容主流瀏覽器的受眾巨幕式風格頁面
這篇文章主要介紹了Bootstrap編寫一個兼容IE8、谷歌等主流瀏覽器的受眾巨幕式風格頁面,感興趣的小伙伴們可以參考一下2016-07-07JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法
這篇文章主要介紹了JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法,涉及javascript針對table元素遍歷與獲取的技巧,需要的朋友可以參考下2015-07-07