主頁 > 知識庫 > JS 密碼強度校驗的正則表達式(簡單且好用)

JS 密碼強度校驗的正則表達式(簡單且好用)

熱門標簽:400電話辦理電話辦理 甘肅醫(yī)療外呼系統(tǒng)排名 地圖標注教學點 西藏智能外呼系統(tǒng)代理商 ai電話機器人搭建 貴港公司如何申請400電話 外呼系統(tǒng)無呼出路由是什么原因 呼叫系統(tǒng)外呼只能兩次 梅縣地圖標注

最近一直在做通行證項目,里面的注冊模塊中輸入密碼需要顯示密碼強度(低中高)。今天就把做的效果給大家分享下,代碼沒有網(wǎng)上搜索的那么復雜,能夠滿足一般的需求。

html 代碼如下:

!DOCTYPE HTML>
html lang="en">
head>
  meta charset="utf-8"/>
  title>密碼強度/title>
  style type="text/css">
  #passStrength{height:6px;width:120px;border:1px solid #ccc;padding:2px;}
  .strengthLv1{background:red;height:6px;width:40px;}
  .strengthLv2{background:orange;height:6px;width:80px;}
  .strengthLv3{background:green;height:6px;width:120px;}
  /style>
/head>
body>
  input type="password" name="pass" id="pass" maxlength="16"/>
  div class="pass-wrap">
    em>密碼強度:/em>
    div id="passStrength">/div>
  /div>
/body>
/html>
script type="text/javascript" src="js/passwordStrength.js">/script>
script type="text/javascript">
new PasswordStrength('pass','passStrength');
/script>

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、對象的第一個參數(shù)是密碼輸入框的 id,第二個參數(shù)是密碼強度長條的 id。

2、checkStrength 方法中可以自定義密碼強度的規(guī)則。

3、密碼強度顯示低中高分別對應 3 個 css 樣式(strengthLv1、strengthLv2、strengthLv3)。

以上所述是小編給大家介紹的JS 密碼強度校驗的正則表達式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

您可能感興趣的文章:
  • JS正則表達式驗證密碼強度
  • 原生js實現(xiàn)密碼強度驗證功能
  • JavaScript實現(xiàn)密碼強度實時驗證
  • js如何驗證密碼強度
  • js驗證密碼強度解析
  • javascript密碼強度校驗代碼(兩種方法)
  • js檢驗密碼強度(低中高)附圖
  • js檢測用戶輸入密碼強度
  • js密碼強度實時檢測代碼
  • js判斷密碼強度的方法

標簽:泰安 本溪 大興安嶺 常州 湖州 哈密 涼山

巨人網(wǎng)絡通訊聲明:本文標題《JS 密碼強度校驗的正則表達式(簡單且好用)》,本文關鍵詞  密碼,強度,校驗,的,正則,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡,涉及言論、版權(quán)與本站無關。
  • 相關文章
  • 下面列出與本文章《JS 密碼強度校驗的正則表達式(簡單且好用)》相關的同類信息!
  • 本頁收集關于JS 密碼強度校驗的正則表達式(簡單且好用)的相關信息資訊供網(wǎng)民參考!
  • 推薦文章