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

JS基于正则表达式实现的密码强度验证功能示例

 更新时间：2017年09月21日 10:18:19   作者：ITzhongzi  
这篇文章主要介绍了JS基于正则表达式实现的密码强度验证功能,涉及javascript事件响应及基于正则的字符遍历、判断等相关操作技巧,需要的朋友可以参考下

本文实例讲述了JS基于正则表达式实现的密码强度验证功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net 脚本之家</title>
</head>
<style type="text/css">
  body {
    background: #ccc;
  }
  label {
    width: 40px;
    display: inline-block;
  }
  span {
    color: red;
  }
  .container {
    margin: 100px auto;
    width: 400px;
    padding: 50px;
    line-height: 40px;
    border: 1px solid #999;
    background: #efefef;
  }
  span {
    margin-left: 30px;
    font-size: 12px;
  }
  .wrong {
    color: red
  }
  .right {
    color: green;
  }
  .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 class="container">
  <label>密码</label>
  <input type="text" id="inp1" maxlength="16">
  <!--<input type="password" id="inp1" maxlength="16"/>-->
  <div class="pass-wrap">
    <em>密码强度：</em>
    <em id="strength"></em>
    <div id="strengthLevel" class="strengthLv0"></div>
  </div>
</div>
<script>
  var regEx = /^[1-9]\d{4,9}$/; //匹配qq号
  //找人
  var inp1 = document.getElementById("inp1");
  var strength = document.getElementById("strength");
  var strengthLevel = document.getElementById("strengthLevel");
  var arr = ["", "低", "中", "高"];
  inp1.onkeyup = function () {
    var level = 0;
    if (/[1-9]/.test(this.value)) {
      level++;
    }
    if (/[a-z]/.test(this.value)) {
      level++;
    }
    if (/[^a-z1-9]/.test(this.value)) {
      level++
    }
    if (this.value.length < 6) {
      level = 0;
    }
    strength.innerHTML = arr[level];
    strengthLevel.className = "strengthLv" + level;
  };
  /* inp1.onkeyup = function () {
   var level = 0;
   if (/[1-9]/.test(this.value)) {
   level++;
   }
   if (/[a-z]/.test(this.value)) {
   level++
   }
   if (/[^a-z0-9]/.test(this.value)) {
   level++
   }
   if (inp1.value.length < 6) {
   level = 0;
   }
   strengthLevel.className = "strengthLv"+level;
   strength.innerHTML = arr[level];
   };*/
</script>
</body>
</html>

PS：这里再为大家提供几款相关在线工具供大家参考使用：

密码安全性在线检测：
http://tools.jb51.net/password/my_password_safe

在线随机数字/字符串生成工具：
http://tools.jb51.net/aideddesign/suijishu

高强度密码生成器：
http://tools.jb51.net/password/CreateStrongPassword

JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术

    不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术

    注明:以下方法都经过实例和开发的长期验证,其实这些技术早就有,今天只不过自己归纳一下
    2008-09-09
  • JS获取url参数,JS发送json格式的POST请求方法

    JS获取url参数,JS发送json格式的POST请求方法

    下面小编就为大家分享一篇JS获取url参数,JS发送json格式的POST请求方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 浅谈js控制li标签排序问题 js调用php函数的方法

    浅谈js控制li标签排序问题 js调用php函数的方法

    下面小编就为大家带来一篇浅谈js控制li标签排序问题 js调用php函数的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JavaScript中EventLoop介绍

    JavaScript中EventLoop介绍

    本篇文章给大家详细介绍了JavaScript中EventLoop的相关知识，有这方面需要的朋友参考学习下。
    2018-01-01
  • javascript分页代码(当前页码居中)

    javascript分页代码(当前页码居中)

    昨天看了妙味课堂的 分页视频教程，今天自己参照其思路，自己写了下，并且自己新增了一个显示页码个数的属性 showPageNum
    2012-09-09
  • js如何将多个json结构组成的字符串转换为数组？

    js如何将多个json结构组成的字符串转换为数组？

    接口返回的EventStream结构的数据,由于http流式传输时,可能会分段,所以导致本该每次返回一段json数据结构的字符串,变成了多个json数据结构的字符串拼接在了一起,本文讲述js如何将多个json结构组成的字符串转换为数组
    2024-08-08
  • JS中数组重排序方法

    JS中数组重排序方法

    在数组中有两个可以用来直接排序的方法，分别是reverse（）和sort（）。下面通过本文给大家详细介绍，对js 数组重排序相关知识感兴趣的朋友一起看看吧
    2016-11-11
  • 微信小程序实现弹出输入框代码实例

    微信小程序实现弹出输入框代码实例

    最近在写一个微信小程序,有一个需求是点击一个按钮后,出现一个输入框,然后根据用户的输入再进行操作,所以这篇文章主要给大家介绍了关于微信小程序实现弹出输入框的相关资料,需要的朋友可以参考下
    2023-09-09
  • uni-app中renderjs使用的方式浅析

    uni-app中renderjs使用的方式浅析

    renderjs是一个运行在视图层的js,它只支持app-vue和h5,下面这篇文章主要给大家介绍了关于uni-app中renderjs使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • javascript 中关于array的常用方法详解

    javascript 中关于array的常用方法详解

    这篇文章主要介绍了javascript 中关于array的常用方法的相关资料,需要的朋友可以参考下
    2017-05-05

最新评论