脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript正则密码强弱度

JavaScript正则验证密码强弱度的实现方法

 更新时间：2021年05月06日 11:41:34   作者：流楚丶格念  
这篇文章主要介绍了JavaScript正则验证密码强弱度的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

展示

设计

密码强弱度分析

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

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

代码

版本一：基本

<!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: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);
  }

<script>


 //获取文本框注册键盘抬起事件
 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>

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

版本二：升级

<!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: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 src="common.js"></script> -->
<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正则密码强弱度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript之排序函数_动力节点Java学院整理

    JavaScript之排序函数_动力节点Java学院整理

    排序也是在程序中经常用到的算法。这篇文章主要介绍了JavaScript之排序函数，有兴趣的可以了解一下
    2017-06-06
  • 详解小程序用户登录状态检查与更新实例

    详解小程序用户登录状态检查与更新实例

    这篇文章主要介绍了小程序用户登录状态检查与更新实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JavaScript基于DOM操作实现简单的数学运算功能示例

    JavaScript基于DOM操作实现简单的数学运算功能示例

    这篇文章主要介绍了JavaScript基于DOM操作实现简单的数学运算功能,涉及javascript节点操作、元素遍历及数学运算相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • JavaScript如何实现精准倒计时

    JavaScript如何实现精准倒计时

    这篇文章主要为大家详细介绍了JavaScript如何实现精准倒计时功能,文中的示例代码简洁易懂,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-02-02
  • window.setInterval()方法的定义和用法及offsetLeft与style.left的区别

    window.setInterval()方法的定义和用法及offsetLeft与style.left的区别

    window.setInterval()方法可以按照指定的周期执行来执行一段程序。周期是以毫秒为单位的，本文给大家介绍window.setInterval()方法的定义和用法，感兴趣的朋友参考下
    2015-11-11
  • Javascript组合继承方法代码实例解析

    Javascript组合继承方法代码实例解析

    这篇文章主要介绍了Javascript组合继承方法代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • JavaScript模板字符串用法实例

    JavaScript模板字符串用法实例

    在ES6之前我们都使用单引号或者双引号来包裹字符串,当我们想要在字符串中加入变量时,不能直接写在字符串里,而是需要通过字符串拼接的方式来往字符串中加入变量,这篇文章主要给大家介绍了关于JavaScript模板字符串用法的相关资料,需要的朋友可以参考下
    2022-11-11
  • 原生js实现密码输入框值的显示隐藏

    原生js实现密码输入框值的显示隐藏

    这篇文章主要为大家详细介绍了原生js实现密码输入框值的显示隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 解读函数的节流与防抖问题

    解读函数的节流与防抖问题

    这篇文章主要介绍了解读函数的节流与防抖问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)

    JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)

    阅读了本书第五章关于使用JavaScript的最佳实践，大部分的建议之前都有耳闻，不过阅读之后有更深的体会
    2013-10-10

最新评论