JS正则表达式验证密码强度


Posted in Javascript onMarch 18, 2020

本文实例为大家分享了JS正则表达式验证密码强度的具体代码,供大家参考,具体内容如下

代码1:

<!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:300px;
  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="pwd">密码</label>
 <input type="text" id="pwd" maxlength="16"><!--课外话题-->
 <div>
  <em>密码强度:</em>
  <em id="strength"></em>
  <div id="strengthLevel" class="strengthLv0"></div>
 </div>
</div>
<script src="common.js"></script>
<script>
 
 /*
 *
 * 密码: 数字,字母,特殊符号
 *
 * 密码: 只有数字- 或者是只有字母,或者是只有特殊符号---1级---弱
 * 两两组合: 数字和字母, 数字和特殊符号, 字母和特殊符号  -----2级----中
 * 三者都有: 数字和字母和特殊符号------3级-----强
 *
 * */
 
 //获取文本框注册键盘抬起事件
 my$("pwd").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(pwd) {
  var lvl=0;//默认是0级
  //密码中是否有数字,或者是字母,或者是特殊符号
  if(/[0-9]/.test(pwd)){
   lvl++;
  }
  //判断密码中有没有字母
  if(/[a-zA-Z]/.test(pwd)){
   lvl++;
  }
  //判断密码中有没有特殊符号
  if(/[^0-9a-zA-Z_]/.test(pwd)){
   lvl++;
  }
  return lvl;//1 3
 }
 
</script>
 
</body>
</html>

优化代码2:

<!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:300px;
  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="pwd">密码</label>
 <input type="text" id="pwd" maxlength="16"><!--课外话题-->
 <div>
  <em>密码强度:</em>
  <em id="strength"></em>
  <div id="strengthLevel" class="strengthLv0"></div>
 </div>
</div>
<script src="common.js"></script>
<script>
 
 //获取文本框注册键盘抬起事件
 my$("pwd").onkeyup=function () {
  //每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
  //如果密码的长度是小于6的,没有必要判断
//  if(this.value.length>=6){
//   var lvl= getLvl(this.value);
//   my$("strengthLevel").className="strengthLv"+lvl;
//  }else{
//   my$("strengthLevel").className="strengthLv0";
//  }
  my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);
 };
 
 //给我密码,我返回对应的级别
 function getLvl(pwd) {
  var lvl=0;//默认是0级
  //密码中是否有数字,或者是字母,或者是特殊符号
  if(/[0-9]/.test(pwd)){
   lvl++;
  }
  //判断密码中有没有字母
  if(/[a-zA-Z]/.test(pwd)){
   lvl++;
  }
  //判断密码中有没有特殊符号
  if(/[^0-9a-zA-Z_]/.test(pwd)){
   lvl++;
  }
  return lvl;//最小的值是1,最大值是3
 }
 
</script>
</body>
</html>

common.js

/**
 * 获取指定标签对象
 * @param id 标签的id属性值
 * @returns {Element}根据id属性值返回指定标签对象
 */
function my$(id) {
 return document.getElementById(id);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DOM 基本方法
Jul 18 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
常用DOM整理
Jun 16 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
原生js实现密码强度验证功能
Mar 18 #Javascript
JavaScript实现密码强度实时验证
Mar 18 #Javascript
js如何验证密码强度
Mar 18 #Javascript
js验证密码强度解析
Mar 18 #Javascript
js实现超级玛丽小游戏
Mar 18 #Javascript
vue 封装 Adminlte3组件的实现
Mar 18 #Javascript
JavaScript仿京东秒杀倒计时
Mar 17 #Javascript
You might like
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
JS面向对象编程详解
2016/03/06 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
python使用递归解决全排列数字示例
2014/02/11 Python
python编写Logistic逻辑回归
2020/12/30 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python3下pygame如何实现显示中文
2020/01/11 Python
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
几个常见的软件测试问题
2016/09/07 面试题
求职者简历中的自我评价
2013/10/20 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
投标邀请书范本
2015/02/02 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python