這篇文章主要介紹“JS密碼強(qiáng)度校驗(yàn)的正則表達(dá)式”,在日常操作中,相信很多人在JS密碼強(qiáng)度校驗(yàn)的正則表達(dá)式問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對(duì)大家解答”JS密碼強(qiáng)度校驗(yàn)的正則表達(dá)式”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),沅江網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:沅江等地區(qū)。沅江做網(wǎng)站價(jià)格咨詢:13518219792
html 代碼如下:
密碼強(qiáng)度 密碼強(qiáng)度:
js 代碼如下:
function PasswordStrength(passwordID,strengthID){ this.init(strengthID); var _this = this; document.getElementById(passwordID).onkeyup = function(){ _this.checkStrength(this.value); } }; PasswordStrength.prototype.init = function(strengthID){ var id = document.getElementById(strengthID); var div = document.createElement('div'); var strong = document.createElement('strong'); this.oStrength = id.appendChild(div); this.oStrengthTxt = id.parentNode.appendChild(strong); }; PasswordStrength.prototype.checkStrength = function (val){ var aLvTxt = ['','低','中','高']; var lv = 0; if(val.match(/[a-z]/g)){lv++;} if(val.match(/[0-9]/g)){lv++;} if(val.match(/(.[^a-z0-9])/g)){lv++;} if(val.length < 6){lv=0;} if(lv > 3){lv=3;} this.oStrength.className = 'strengthLv' + lv; this.oStrengthTxt.innerHTML = aLvTxt[lv]; };
效果圖:
使用說明:
1、對(duì)象的第一個(gè)參數(shù)是密碼輸入框的 id,第二個(gè)參數(shù)是密碼強(qiáng)度長條的 id。
2、checkStrength 方法中可以自定義密碼強(qiáng)度的規(guī)則。
3、密碼強(qiáng)度顯示低中高分別對(duì)應(yīng) 3 個(gè) css 樣式(strengthLv1、strengthLv2、strengthLv3)。
到此,關(guān)于“JS密碼強(qiáng)度校驗(yàn)的正則表達(dá)式”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!