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

最新推荐文章于 2024-02-06 11:07:20 发布
最新推荐文章于 2024-02-06 11:07:20 发布
阅读量3.1k 收藏 3
点赞数 2
分类专栏： js代码 文章标签： JS 正则表达式 密码强弱验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guanmao4322/article/details/88380118
版权

代码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);
}

 

夏沐_lk
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用grid布局解决flex布局最后一行不足的问题
qcc0716的博客
08-13 2654
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
JavaScript正则验证，判断密码是否是字母 数字 特殊字符中的两种以上组合
u013107497的博客
08-11 829
判断密码是否是字母 数字 特殊字符中的两种以上组合
密码正则表达式大全
qq_59125846的博客
03-15 5380
密码正则表达式大全
正则表达式密码验证
最新发布
dwoiauda的博客
02-06 1075
正则表达式验证密码
密码正则表达式
qq_39375778的博客
06-04 1万+
常用密码正则表达式 必须包含一个大写，一个小写字母，且长度为8到16位 ^(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9~!@&%#_]{8,16}$ 必须包含一个大写，一个小写字母，一个特殊字符，且长度为8到16位 ^(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@&%#_])[a-zA-Z0-9~!@&%#_]{8,16}$...
正则表达式：密码规则
08-06 8972
密码设定规则：8-16位，其中必须包含数字、小写字母、大写字母；字符仅支持“！@#¥%”，不支持空格 1、(?!.*[！·（）{}【】“”：；，》￥、。‘’——\\s-……%\\n]) 表示的是不含中文的特殊字符，以及空格与回车，里面的符合可以自动补充或删除； 2、(?=.*[a-zA-Z]) 表示含小写或大写的英文字母 3、(?=.*\\d) 表示必须匹配到数字 ;小写字母(?=.*[a-z]);大写字母(?=.*[A-Z]) 4、(?=.*[~!@#$%^&*()_+`\\-
js正则校验数字和字母字符串
热门推荐
hacker_Lees的博客
03-19 2万+
1.判断字符串由数字和字母组成 function checkPassWord(nubmer) { var re = /^[0-9a-zA-Z]*$/; //判断字符串是否为数字和字母组合 if (!re.test(nubmer)) { return false; }else{ return tru...
js正则表达式验证密码强度【推荐】
10-20
本文主要介绍了js利用正则表达式验证密码强度的实例，具有很好的参考价值。下面跟着小编一起来看下吧
JS正则表达式验证密码强度
10-15
主要为大家详细介绍了JS正则表达式验证密码强度，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS基于正则表达式实现的密码强度验证功能示例
10-19
主要介绍了JS基于正则表达式实现的密码强度验证功能,涉及javascript事件响应及基于正则的字符遍历、判断等相关操作技巧,需要的朋友可以参考下
密码正则表达式的整合
weixin_41997724的博客
03-19 1436
密码的正则表达式整合 1、只能为纯数字 var reg = /^\d+$|^\d+[.]?\d+$/; 2、只能为纯字母（不区分大小写） var reg = /^[a-zA-Z]+$/; 3、只能为数字或者字母（不包含特殊字符） var reg = /^[0-9a-zA-Z]+$/; 4、只能为数字的11位字符（不包含特殊字符以及字母） var reg = /^[0-9]{1...
密码校验常用正则表达式
weixin_42333548的博客
12-15 9139
至少八个字符，至少一个字母和一个数字： "^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$" 至少八个字符，至少一个字母，一个数字和一个特殊字符： "^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$" 最少八个字符，至少一个大写字母，一个小写字母和一个数字： "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$" 至少八
JS验证密码强度——正则表达式进行判断
weixin_44584059的博客
09-28 3000
借助正则表达式，实现对用户输入的密码进行等级评定实现效果HTMLCSSJS 实现效果 HTML <!-- 验证密码强度S --> <div class="pswContainer"> <h1>验证密码强度</h1> <label for="">密码</label> <input type="text" id="inp1" maxlength="16"> <div
JS的常用正则表达式 验证密码（转载自用）
qq_37742572的博客
03-06 6251
//校验是否全由数字组成 function isDigit(s){ var patrn=/^[0-9]{1,20}$/; if (!patrn.exec(s)) return false; return true； } //校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串 function isRegisterUserName(s) { var pat...
JS中密码用正则表达式校验
weixin_42943920的博客
12-26 5658
实时检测输入的密码手机否符合规范 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
密码强度 弱 中 强 正则表达式判断
泥猴桃的博客
04-18 7696
今天看了下项目中的注册页源码，顺带着看了下判断密码强度的正则表达式，写的很好，最起码比我写的好，所以记录下来留着以后参考 代码如下var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g") //强 var mediumRegex = new RegExp("^(?=.{7
js正则表达式：强密码（密码必须包含大写字母、小写字母、数字和特殊字符，长度8~16位）
PHP转JAVA中……2023年9月11日起
06-01 3640
正则表达式1：/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[a-z])(?><])：必须包含特殊字符，字符范围：“~!=.*[0-9])：同“(?=.*\d)”必须包含数字。=.*[A-Z]) ：必须包含大写字母。=.*[a-z])：必须包含小写字母。
正则表达式之密码效验（检验密码是含有小写字母、大写字母、数字）
zhaoshuliok的博客
11-09 1万+
公司新系统需要实现一个注册功能，需要写一个正则表达式来检验一个密码是否含有小写字母、大写字母、数字....,且密码长度为6-12位   正则表达式:  ^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,16}$ 解析： 一、 首先分开来看这个正则表达式每个小部分的含义 （1）(?![A-Z]+$)
vue密码强度正则表达式验证
08-29
要在 Vue.js 中使用正则表达式验证密码强度，可以在组件中使用 `v-model` 指令绑定密码输入框的值，并在计算属性或方法中编写正则表达式来验证密码。 下面是一个简单的示例代码，演示了如何在 Vue.js 中使用正则...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值