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 相关文章推荐
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 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防止sql注入代码实例
2013/12/18 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
python删除过期文件的方法
2015/05/29 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
软件测试企业面试试卷
2016/07/13 面试题
大学信息公开实施方案
2014/03/09 职场文书
网络管理员岗位职责
2014/03/17 职场文书
关爱残疾人标语
2014/06/25 职场文书
公司合作协议范文
2014/10/01 职场文书
介绍一下28个JS常用数组方法
2022/05/06 Javascript
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技