JavaScript正则验证密码强弱度

文章目录

    • 展示
    • 设计
      • 密码强弱度分析
    • 代码
      • 版本一:基本
      • 版本二:升级

展示

JavaScript正则验证密码强弱度_第1张图片

设计

密码强弱度分析

密码由数字,字母,特殊符号组成

  • 密码: 只有数字- 或者是只有字母,或者是只有特殊符号——1级:弱
  • 两两组合: 数字和字母, 数字和特殊符号, 字母和特殊符号——2级:中
  • 三者都有: 数字和字母和特殊符号——3级:强

代码

版本一:基本


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
head>
<style type="text/css">
  #dv{
      
    width: 300px;
    height:200px;
    position: absolute;
    left:100px;
    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="password">密码label>
  <input type="text" id="password" maxlength="16">
  <div>
    <b>密码强度:b>
    <em id="strength">em>
    <div id="strengthLevel" class="strengthLv0">div>
  div>
div>
<script>
  function my$(id) {
      
      return document.getElementById(id);
  }

 //获取文本框注册键盘抬起事件
 my$("password").onkeyup=function () {
      
   //每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
   //如果密码的长度是小于6的,没有必要判断
   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";
   }


 };

 //给我密码,我返回对应的级别
 function getLvl(password) {
      
   var lvl=0;//默认是0级
   //密码中是否有数字,或者是字母,或者是特殊符号
   if(/[0-9]/.test(password)){
      
     lvl++;
   }
   //判断密码中有没有字母
   if(/[a-zA-Z]/.test(password)){
      
     lvl++;
   }
   //判断密码中有没有特殊符号
   if(/[^0-9a-zA-Z_]/.test(password)){
      
     lvl++;
   }
   return lvl;//1  3
 }

script>
body>
html>

上面代码有点冗余,我们对其进行升级改写

版本二:升级




<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
head>
<style type="text/css">
  #dv{
      
    width: 300px;
    height:200px;
    position: absolute;
    left:100px;
    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="password">密码label>
  <input type="text" id="password" maxlength="16">
  <div>
    <b>密码强度:b>
    <em id="strength">em>
    <div id="strengthLevel" class="strengthLv0">div>
  div>
div>

<script>
  function my$(id) {
      
      return document.getElementById(id);
  }
  //获取文本框注册键盘抬起事件
  my$("password").onkeyup=function () {
      
    //每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
    my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);
  };

  //给我密码,我返回对应的级别
  function getLvl(password) {
      
    var lvl=0;//默认是0级
    //密码中是否有数字,或者是字母,或者是特殊符号
    if(/[0-9]/.test(password)){
      
      lvl++;
    }
    //判断密码中有没有字母
    if(/[a-zA-Z]/.test(password)){
      
      lvl++;
    }
    //判断密码中有没有特殊符号
    if(/[^0-9a-zA-Z_]/.test(password)){
      
      lvl++;
    }
    return lvl;//最小的值是1,最大值是3
  }


script>
body>
html>




你可能感兴趣的:(#,JavaScript高级,javascript,js,css,html,python)