脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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正则密码强弱度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • js实现class样式的修改、添加及删除的方法

    js实现class样式的修改、添加及删除的方法

    这篇文章主要介绍了js实现class样式的修改、添加及删除的方法,主要通过修改标签的className来实现这一功能,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • JS技巧Canvas性能优化脏矩形渲染实例详解

    JS技巧Canvas性能优化脏矩形渲染实例详解

    这篇文章主要为大家介绍了JS技巧Canvas 性能优化脏矩形渲染实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • HTML页面定时跳转方法解析（2种任选）

    HTML页面定时跳转方法解析（2种任选）

    本文主要对HTML页面定时跳转进行方法介绍：1、meta refresh 实现。2、JavaScript 实现。具有很好的参考价值，需要的朋友一起来看下吧
    2016-12-12
  • 初识Javascript小结

    初识Javascript小结

    本文是一个学习javascript的新手总结的一些关于javascript的方法，有需要的小伙伴可以参考下。
    2015-07-07
  • JavaScript实现无限轮播效果

    JavaScript实现无限轮播效果

    这篇文章主要介为大家详细绍了JavaScript实现无限轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JavaScript寄生组合式继承实例详解

    JavaScript寄生组合式继承实例详解

    这篇文章主要介绍了JavaScript寄生组合式继承,结合实例形式详细分析了寄生组合式继承原理、实现方法与相关注意事项,需要的朋友可以参考下
    2018-01-01
  • 如何基于webRTC实现人脸识别功能

    如何基于webRTC实现人脸识别功能

    WebRTC技术包含了音视频编解码技术、传输技术、流媒体服务器技术等,涵盖了音视频处理和传输的方方面面,下面这篇文章主要给大家介绍了关于如何基于webRTC实现人脸识别的相关资料,需要的朋友可以参考下
    2022-12-12
  • js实现的美女瀑布流效果代码

    js实现的美女瀑布流效果代码

    美女瀑布流效果分享一下，大家勿喷啊 借用新浪的美女 嘿嘿 睁大你的眼睛
    2012-11-11
  • JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法

    JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法

    这篇文章主要介绍了JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法,涉及javascript针对时间与日期操作的相关技巧,需要的朋友可以参考下
    2016-08-08
  • js+html获取系统当前时间

    js+html获取系统当前时间

    这篇文章主要为大家详细介绍了javascript html获取系统当前时间，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论