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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
学习YUI.Ext 第二天
Mar 10 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
详解Angular路由之路由守卫
May 10 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
vue实现在线学生录入系统
May 30 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 Javascript
Vue实现购物车基本功能
Nov 08 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
PHP的一个基础知识 表单提交
2011/07/04 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
php中namespace及use用法分析
2016/12/06 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
js读取cookie方法总结
2014/10/31 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
PyQt5实现下载进度条效果
2018/04/19 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
乡镇组织委员个人整改措施
2014/09/16 职场文书
中秋节晚会开场白
2015/05/29 职场文书