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


Posted in Javascript onSeptember 21, 2017

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

先来看看运行效果:

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

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 三水点靠木</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>
Javascript 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
微信小程序异步处理详解
Nov 10 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 #jQuery
详解react服务端渲染(同构)的方法
Sep 21 #Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 #Javascript
删除table表格行的实例讲解
Sep 21 #Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 #Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 #Javascript
详解JavaScript中的六种错误类型
Sep 21 #Javascript
You might like
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
js设置默认时间跨度过程详解
2019/07/17 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
python抽象基类用法实例分析
2015/06/04 Python
Python实现LRU算法的2种方法
2015/06/24 Python
Python模拟登陆实现代码
2017/06/14 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python实现串口通信的示例代码
2020/02/10 Python
英国计算机商店:Technextday
2019/12/28 全球购物
道路交通安全实施方案
2014/03/12 职场文书
啤酒节策划方案
2014/05/28 职场文书
集体生日活动方案
2014/08/18 职场文书
英文产品推荐信
2015/03/27 职场文书
七年级语文教学反思
2016/03/03 职场文书
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript