JS正則表達(dá)式驗(yàn)證密碼強(qiáng)度
本文實(shí)例為大家分享了JS正則表達(dá)式驗(yàn)證密碼強(qiáng)度的具體代碼,供大家參考,具體內(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>密碼強(qiáng)度:</em> <em id="strength"></em> <div id="strengthLevel" class="strengthLv0"></div> </div> </div> <script src="common.js"></script> <script> /* * * 密碼: 數(shù)字,字母,特殊符號(hào) * * 密碼: 只有數(shù)字- 或者是只有字母,或者是只有特殊符號(hào)---1級(jí)---弱 * 兩兩組合: 數(shù)字和字母, 數(shù)字和特殊符號(hào), 字母和特殊符號(hào) -----2級(jí)----中 * 三者都有: 數(shù)字和字母和特殊符號(hào)------3級(jí)-----強(qiáng) * * */ //獲取文本框注冊(cè)鍵盤(pán)抬起事件 my$("pwd").onkeyup=function () { //每次鍵盤(pán)抬起都要獲取文本框中的內(nèi)容,驗(yàn)證文本框中有什么東西,得到一個(gè)級(jí)別,然后下面的div顯示對(duì)應(yīng)的顏色 //如果密碼的長(zhǎng)度是小于6的,沒(méi)有必要判斷 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(pwd) { var lvl=0;//默認(rèn)是0級(jí) //密碼中是否有數(shù)字,或者是字母,或者是特殊符號(hào) if(/[0-9]/.test(pwd)){ lvl++; } //判斷密碼中有沒(méi)有字母 if(/[a-zA-Z]/.test(pwd)){ lvl++; } //判斷密碼中有沒(méi)有特殊符號(hào) 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>密碼強(qiáng)度:</em> <em id="strength"></em> <div id="strengthLevel" class="strengthLv0"></div> </div> </div> <script src="common.js"></script> <script> //獲取文本框注冊(cè)鍵盤(pán)抬起事件 my$("pwd").onkeyup=function () { //每次鍵盤(pán)抬起都要獲取文本框中的內(nèi)容,驗(yàn)證文本框中有什么東西,得到一個(gè)級(jí)別,然后下面的div顯示對(duì)應(yīng)的顏色 //如果密碼的長(zhǎng)度是小于6的,沒(méi)有必要判斷 // 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); }; //給我密碼,我返回對(duì)應(yīng)的級(jí)別 function getLvl(pwd) { var lvl=0;//默認(rèn)是0級(jí) //密碼中是否有數(shù)字,或者是字母,或者是特殊符號(hào) if(/[0-9]/.test(pwd)){ lvl++; } //判斷密碼中有沒(méi)有字母 if(/[a-zA-Z]/.test(pwd)){ lvl++; } //判斷密碼中有沒(méi)有特殊符號(hào) if(/[^0-9a-zA-Z_]/.test(pwd)){ lvl++; } return lvl;//最小的值是1,最大值是3 } </script> </body> </html>
common.js
/** * 獲取指定標(biāo)簽對(duì)象 * @param id 標(biāo)簽的id屬性值 * @returns {Element}根據(jù)id屬性值返回指定標(biāo)簽對(duì)象 */ function my$(id) { return document.getElementById(id); }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
chatGPT前端流式輸出js實(shí)現(xiàn)三種方法—fetch、SSE、websocket
項(xiàng)目需要接入chatgpt提供的api,后端返回流式的字符,前端接收并實(shí)時(shí)顯示,在JavaScript中,使用Stream流通常指的是處理數(shù)據(jù)流的一種方式,它們?cè)试S數(shù)據(jù)被處理成塊,而不是一次性處理整個(gè)數(shù)據(jù)集,這對(duì)于處理大量數(shù)據(jù)或者來(lái)自網(wǎng)絡(luò)請(qǐng)求的數(shù)據(jù)非常有用,2024-07-07在javaScript中檢測(cè)數(shù)據(jù)類(lèi)型的幾種方式小結(jié)
在用javaScript編程的過(guò)程中,我們經(jīng)常會(huì)遇到這樣一個(gè)問(wèn)題,就是需要檢測(cè)一個(gè)數(shù)據(jù)或變量的類(lèi)型,本篇文章主要介紹了在javaScript中檢測(cè)數(shù)據(jù)類(lèi)型的幾種方式小結(jié),有興趣的可以了解一下。2017-03-03基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【九】實(shí)現(xiàn)Web頁(yè)面內(nèi)容的打印預(yù)覽和保存操作
本篇文章主要介紹如何實(shí)現(xiàn)Web頁(yè)面內(nèi)容的打印預(yù)覽和保存操作的相關(guān)知識(shí),感興趣的朋友一起學(xué)習(xí)吧2016-05-05Bootstrap編寫(xiě)一個(gè)兼容主流瀏覽器的受眾巨幕式風(fēng)格頁(yè)面
這篇文章主要介紹了Bootstrap編寫(xiě)一個(gè)兼容IE8、谷歌等主流瀏覽器的受眾巨幕式風(fēng)格頁(yè)面,感興趣的小伙伴們可以參考一下2016-07-07JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法
這篇文章主要介紹了JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法,涉及javascript針對(duì)table元素遍歷與獲取的技巧,需要的朋友可以參考下2015-07-07微信小程序?qū)崿F(xiàn)手勢(shì)解鎖的示例詳解
手勢(shì)解鎖是生活中常用的解鎖方式,本文將通過(guò)微信小程序?qū)崿F(xiàn)手勢(shì)解鎖這一功能,本實(shí)例以工具的形式可以嵌入到不同的項(xiàng)目之中,感興趣的可以了解一下2022-04-04