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的版本实现执行不同的代码
May 11 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
webpack中的模式(mode)使用详解
Feb 20 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
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
python实现html转ubb代码(html2ubb)
2014/07/03 Python
记录Django开发心得
2014/07/16 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
深入理解python中的atexit模块
2017/03/07 Python
python版学生管理系统
2018/01/10 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
优秀应届毕业生自荐信
2013/11/16 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
好听的队名和口号
2014/06/09 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
vue3获取当前路由地址
2022/02/18 Vue.js
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
5个实用的JavaScript新特性
2022/06/16 Javascript