這篇文章給大家分享的是有關(guān)js如何實(shí)現(xiàn)密碼強(qiáng)度檢驗(yàn)功能的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
我們是2013年至今的成都網(wǎng)站建設(shè)公司,提供網(wǎng)站建設(shè),電商網(wǎng)站設(shè)計(jì)開發(fā),成都外貿(mào)網(wǎng)站制作,響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì),小程序設(shè)計(jì)、等服務(wù)。為客戶創(chuàng)造有價(jià)值的品牌營(yíng)銷體驗(yàn),讓互聯(lián)網(wǎng)提升企業(yè)的競(jìng)爭(zhēng)力!
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)度長(zhǎng)條的 id。
2、checkStrength 方法中可以自定義密碼強(qiáng)度的規(guī)則。
3、密碼強(qiáng)度顯示低中高分別對(duì)應(yīng) 3 個(gè) css 樣式(strengthLv1、strengthLv2、strengthLv3)。
感謝各位的閱讀!關(guān)于“js如何實(shí)現(xiàn)密碼強(qiáng)度檢驗(yàn)功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!