JS正則表示式驗證密碼強度
阿新 • • 發佈:2020-03-19
本文例項為大家分享了JS正則表示式驗證密碼強度的具體程式碼,供大家參考,具體內容如下
程式碼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> /* * * 密碼: 數字,字母,特殊符號 * * 密碼: 只有數字- 或者是隻有字母,或者是隻有特殊符號---1級---弱 * 兩兩組合: 數字和字母,數字和特殊符號,字母和特殊符號 -----2級----中 * 三者都有: 數字和字母和特殊符號------3級-----強 * * */ //獲取文字框註冊鍵盤抬起事件 my$("pwd").onkeyup=function () { //每次鍵盤抬起都要獲取文字框中的內容,驗證文字框中有什麼東西,得到一個級別,然後下面的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級 //密碼中是否有數字,或者是字母,或者是特殊符號 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>
優化程式碼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 () { //每次鍵盤抬起都要獲取文字框中的內容,沒有必要判斷 // 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); }; //給我密碼,或者是特殊符號 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}根據id屬性值返回指定標籤物件 */ function my$(id) { return document.getElementById(id); }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。