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入门教程(3) js面向对象
Jan 31 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
JS hashMap实例详解
May 26 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
JavaScript编写开发动态时钟
Jul 29 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
python实现在线翻译功能
2020/03/03 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
python如何代码集体右移
2020/07/20 Python
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
类的返射机制中的包及核心类
2016/09/12 面试题
邮政员工辞职信
2014/01/16 职场文书
商铺租赁意向书
2014/04/01 职场文书
小学生期末评语
2014/04/21 职场文书
关于安全的演讲稿
2014/05/09 职场文书
营业员岗位职责
2015/02/11 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
python 逐步回归算法
2021/04/06 Python