文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

展示

设计

密码强弱度分析

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

代码

版本一:基本


<!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正则密码强弱度内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯