快捷導(dǎo)航

JS正則表達(dá)式驗(yàn)證密碼強(qiáng)度

更新時(shí)間：2020年03月18日 13:54:05 作者：夏沐_lk

這篇文章主要為大家詳細(xì)介紹了JS正則表達(dá)式驗(yàn)證密碼強(qiáng)度，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(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"><!--課外話(huà)題-->
 <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"><!--課外話(huà)題-->
 <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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: