JavaScript实现密码强度验证

最新推荐文章于 2022-08-10 16:14:52 发布
最新推荐文章于 2022-08-10 16:14:52 发布
阅读量615 收藏
点赞数 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>密码强度</title>
    <style type="text/css">
        #passStrength {
            height: 6px;
            width: 120px;
            border: 1px solid #ccc;
            padding: 2px;
        }

        .strengthLv1 {
            background: red;
            height: 6px;
            width: 40px;
        }

        .strengthLv2 {
            background: orange;
            height: 6px;
            width: 80px;
        }

        .strengthLv3 {
            background: green;
            height: 6px;
            width: 120px;
        }
    </style>

    <script type="text/javascript">
        window.onload = function ()
        {
            
            new PassworStrength("passStrength","pass");
            function PassworStrength(passStrength,pass)
            {
                
                this.init = function(passStrength)
                {
                    
                    var tempStrongDiv = document.createElement("div");
                    var tempPasswordStrengthLevel = document.createElement("strong");

                    var passStrengthDiv = document.getElementById(passStrength);
                    this.strongDiv = passStrengthDiv.appendChild(tempStrongDiv);
                    this.passwordStrengthLevelDiv = passStrengthDiv.parentNode.appendChild(tempPasswordStrengthLevel);

                    
                }
                
                this.checkPasswordStrength = function (password)
                {
                    var strengthText = ["低", "低", "中", "高"];
                    var strengthLevel = 0;
                    if (/[a-zA-Z]/.test(password))
                    {
                        strengthLevel++;
                    }

                    if (/[0-9]/.test(password))
                    {
                        strengthLevel++;
                    }

                    if (/[^a-zA-Z0-9]/.test(password))
                    {
                        strengthLevel++;
                    }
                    
                    if (password.length <= 6)
                    {
                        strengthLevel = 0;
                    }

                    if (strengthLevel <= 1)
                    {
                        strengthLevel = 1;
                    }

                    this.strongDiv.className = "strengthLv" + strengthLevel;
                    this.passwordStrengthLevelDiv.innerText = strengthText[strengthLevel];
                }

                this.init(passStrength);
                var _this = this;
                document.getElementById(pass).onkeyup = function ()
                {
                    _this.checkPasswordStrength(this.value);
                }
            }
        }
    </script>
</head>
<body>
    <input type="password" name="pass" id="pass" maxlength="16" />
    <div class="pass-wrap">
        <em>密码强度：</em>
        <div id="passStrength"></div>
    </div>
</body>
</html>

 

http://www.cnblogs.com/yjzhu/p/3394717.html

cqulyk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html判断输入的位数,js检测用户输入密码强度
weixin_35589806的博客
06-05 639
一个用Javascript检测用户输入密码强度的效果代码，以下代码主要是从以下四个方面检测用户输入的密码的强度的，有兴趣的朋友可以自己添加或修改成自己想要的形式！1. 如果输入的密码位数少于5位，那么就判定为弱。2. 如果输入的密码只由数字、小写字母、大写字母或其它特殊符号当中的一种组成，则判定为弱。3. 如果密码由数字、小写字母、大写字母或其它特殊符号当中的两种组成，则判定为中。4. 如果密码由...
用JavaScript验证密码强度
duyiwuer888的专栏
11-19 161
    规则如下:     四种组合指 数字,小写字母,大写字母,其它字符 　　把密码强度分为四等: 　　1. 密码长度小于或等于四位.或者密码只有一种组合 　　2. 密码长度大于四位, 且有两种组合. 　　3. 密码长度大于四位, 且有三种组合. 　　4. 密码长度大于四位, 且有四种组合. 　　如果没有输入则返回0 　　判断函数:     &lt;script language="JavaSc...
[学习笔记]vue密码强度判断
iufesjgc的博客
08-05 1470
老规矩，先上效果图：（方便演示，input中type改为了text） 判断规则用了这个https://blog.csdn.net/Ylxin/article/details/7725784 前面评分规则差不太多，后面评分等级作了修改： 小于10：密码强度不合格，10-25：弱，25-35：中，35以上：强 <div class="passwordstrength"> <div class="level1" :style="{'.
原生js实现密码强度验证
Aha
01-05 3386
我们在填写表单的时候，特别是输入密码的时候，经常看到实时显示密码强度的效果，那么这种效果如何通过我们的原生js实现呢？ 思路: 1.密码通常是由数字，大写字母，小写字母以及特殊字符组成 2.密码全部是纯数字或者纯大写字母，或者纯小写字母，我们认为是密码强度较低 3.密码由两种混合，我们认为密码强度是中等的 4.密码由三种或者四种混合，我们认为这样的密码组合强度很强 5.通过判断输入的密
js-密码验证
Mozifei73的博客
08-10 2221
js-密码验证。
JavaScript实现密码强度实时验证
11-20
一些密码强度验证的方法都是计算字符的类型，然后分类加权累算。权重越高，相应的强度也就越高。 具体的写法及实现方式有很多种，本文只介绍其中一种方案 <!DOCTYPE html> <html lang="en"> <head&gt...
原生js实现密码强度验证功能
10-15
在JavaScript中实现密码强度验证是常见的一种用户交互增强体验的方式，尤其在注册或登录界面，实时显示密码强度有助于用户创建安全的密码。本篇将详细讲解如何使用原生JavaScript实现这一功能。 首先，我们需要理解...
javascript实现前端input密码输入强度验证
10-15
JavaScript 实现前端输入密码强度验证是一种常见的用户交互设计，它能帮助用户创建更安全的密码。下面我们将详细探讨如何利用JavaScript实现这一功能。 首先，密码强度验证的核心在于使用正则表达式来检查用户输入...
用JavaScript验证密码是否正确有效
qq_51066068的博客
04-13 3896
问题描述： 代码实现： var text='@agK24930'; var re =/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#%&]).{6,12}$/; var result= re.test(text); if(result){ console.log("密码正确"); } else{ console.log("密码.
js实现密码强度检测【附示例】
10-22
下面小编就为大家带来一篇js实现密码强度检测【附示例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript密码强度校验代码（两种方法）
10-23
为了保证网站个人信息的安全，很多网站在注册页面都设置密码强度这项，用javascript如何实现密码强度校验代码呢？下面小编给大家整理了两种方法使用javascript密码强度校验代码，有需要的朋友可以参考下
基于ElementUI组件二次开发的密码强度验证组件
厉害哥哥的博客
04-10 3225
1.简介
关于页面密码强度的设计
kiley1984的博客
04-04 1264
首先，我们来了解下按位或运算：将进行按位或运算的两个变量先转换为2进制，然后进行按位运算。 比如： 2|4                  2对应的2进制           0010  4对应的2进制          0100  按位或运算               0110=6 这时，我们发现，转换为2进制后，对应的上下两位中，只要有1位为1，结果就是为1，这也是按位或运算的准
基于规则评分的密码强度检测算法分析及实现(JavaScript)
weixin_33709219的博客
03-19 357
简言 用正则表达式做用户密码强度的通过性判定，过于简单粗暴，不但用户体验差，而且用户帐号安全性也差。那么如何准确评价用户密码的强度，保护用户帐号安全呢？本文分析介绍了几种基于规则评分的密码强度检测算法，并给出了相应的演示程序。大家可以根据自己项目安全性需要，做最适合于自己的方案选择。 1 方案1 （简单） 方案1算法通过密码构成分析，结合权重分派，统计得出密码强度得分。得分越高，表示密码强度越大...
JavaScript用正则表达式校验账号和密码
心中有侠
08-23 4088
//账号格式5-12位数字 var accountPattern = /^\d{5,12}$/; //密码格式6-22位字母数字 var passwordPattern = /^[a-zA-Z0-9]{6,22}$/; //验证码格式4位字母数字 var codePattern = /^[a-zA-Z0-9]{4}$/; //检测账号格式 function testAccount(accoun...
【WEB前端|H5实例】HTML+CSS+JS实现修改密码的密码强度判断
dxy1128的博客
04-20 3416
代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .default { background:...
javascript表单账户密码校验提交
老李家的博客
09-14 3917
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; span{color:
js密码强度验证
千千
01-30 6471
做注册界面的时候，输入密码的时候要进行密码强度的验证。 一、html 安全级别：■■strong class="s3">■ ○ 6-20 个字符
html 密码强度验证
最新发布
06-06
你可以使用 JavaScript 和正则表达式来实现 HTML 密码强度验证。以下是一个简单的示例： ```html 密码： (this.value)"> <div id="password-strength"></div> 提交 function checkPasswordStrength...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值