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 相关文章推荐
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
PHP goto语句用法实例
2019/08/06 PHP
用javascript实现画板的代码
2007/09/05 Javascript
Div Select挡住的解决办法
2008/08/07 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
JS常见算法详解
2017/02/28 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
Python操作MongoDB详解及实例
2017/05/18 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
python创建文件备份的脚本
2018/09/11 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
EJB timer的种类
2014/10/28 面试题
英语专业毕业个人求职自荐信
2013/09/21 职场文书
授权委托书公证
2014/09/14 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
辞职信怎么写
2015/02/27 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书