简单的密码强度判断

一个简单的判断密码强度的小例子。

密码强度等级设定:

弱:纯字母或者纯数字组成

中:数字与字母混合组成

高:数字,字母,符号三者混合组成

这部分的js代码:

$(‘#pass‘).keyup(function(e) {
        // 最强的正则表达式:8位 大小写字母 数字 符号
         var strongRegex = new RegExp("^(?=.{8,})(?=.*[a-zA-Z])(?=.*[0-9])(?=.*\\W).*$", "g");
         //  中等强度 : 7位 大小写字母或者大写字母数字混合或者小写字母数字混合
         var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
         // 弱密码强度 : 6位 纯数字
         var enoughRegex = new RegExp("(?=.{6,}).*", "g");

         if (false == enoughRegex.test($(this).val())) {
                 $(‘#passstrength‘).html(‘密码长度至少6位‘);
         } else if (strongRegex.test($(this).val())) {
                 $(‘#passstrength‘).html(‘密码强度:强!‘);
                 strong();
         } else if (mediumRegex.test($(this).val())) {
                 $(‘#passstrength‘).html(‘密码强度:中等!‘);
                 medium();
         } else {
                 $(‘#passstrength‘).html(‘密码强度:弱!‘);
                 week();
         }
         return true;
    });

然后对密码的不同强度分别设置css样式,结果:

下面附上全部html内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>password strangth validate</title>
    <script src="jquery-1.8.3.min.js"></script>
</head>
<style>
    .form{
        width: 500px;
        height: 200px;
        margin: 100px auto;
        border: 1px solid #ddd;
        border-bottom: 3px solid #ddd;
        border-right: 2px solid #ddd;
        border-radius: 10px;
        background-color: rgba(0,0,0,.1);
        text-align: center;
    }
    .form input{
        margin-top: 70px;
        height: 30px;
        width: 200px;
        border: none;
        border-radius: 5px;
        border:1px solid #ddd;
        text-indent: 10px;
        color: #666;
    }
    .form .grade3{
        width: 195px;
        height: 10px;
        margin: 5px auto;
        position: relative;
    }
    .form .grade3 .grade{
        width: 60px;
        height: 100%;
        border: 1px solid #fff;
        margin-right: 3px;
        float: left;
    }
    .form .grade3 .yellow{
        background-color: #E38D33;
    }
    .form .grade3 .green{
        background-color: #6DBD2E;
    }
    .form .grade3 .red{
        background-color: #EE5E59;
    }
    #passstrength{
        color: #666;
        position: absolute;
        top: 0px;
        left:0;
        font-size: 10px;
        line-height: 20px;
        font-family: ‘微软雅黑‘;
    }

</style>
<body>
<div class="form">
    <input type="password" name="pass" id="pass" />

    <div class="grade3">
        <div class="grade g1 "></div>
        <div class="grade g2 "></div>
        <div class="grade g3 "></div>

        <p id="passstrength"></p>
    </div>

</div>

</body>

<script type="text/javascript">
    $(‘#pass‘).keyup(function(e) {
        // 最强的正则表达式:8位 大小写字母 数字 符号
         var strongRegex = new RegExp("^(?=.{8,})(?=.*[a-zA-Z])(?=.*[0-9])(?=.*\\W).*$", "g");
         //  中等强度 : 7位 大小写字母或者大写字母数字混合或者小写字母数字混合
         var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
         // 弱密码强度 : 6位 纯数字
         var enoughRegex = new RegExp("(?=.{6,}).*", "g");

         if (false == enoughRegex.test($(this).val())) {
                 $(‘#passstrength‘).html(‘密码长度至少6位‘);
         } else if (strongRegex.test($(this).val())) {
                 $(‘#passstrength‘).html(‘密码强度:强!‘);
                 strong();
         } else if (mediumRegex.test($(this).val())) {
                 $(‘#passstrength‘).html(‘密码强度:中等!‘);
                 medium();
         } else {
                 $(‘#passstrength‘).html(‘密码强度:弱!‘);
                 week();
         }
         return true;
    });

    function week (argument) {
        $(‘.g1,.g2‘).removeClass(‘yellow‘);
        $(‘.g1,.g2,.g3‘).removeClass(‘green‘);
        $(‘.g1‘).addClass(‘red‘);
    }

    function medium (argument) {
        $(‘.g1‘).removeClass(‘red‘);
        $(‘.g1,.g2,.g3‘).removeClass(‘green‘);
        $(‘.g1,.g2‘).addClass(‘yellow‘);
    }

    function strong (argument) {
        $(‘.g1‘).removeClass(‘red‘);
        $(‘.g1,.g2‘).removeClass(‘yellow‘);
        $(‘.g1,.g2,.g3‘).addClass(‘green‘);
    }

</script>
</html>

注:jquery库自备。

时间: 2024-10-10 11:56:57

简单的密码强度判断的相关文章

Java用正则表达式写简单账号密码注册判断

Java写简单账号密码注册判断 菜鸟刚学的表达式 练手代码. 1 /*在注册时通常要验证用户名和密码是否合法,运用学习过的知识完成如下操作: 2 3 用户名长度大于等于6位,必须包含数字和英文字母 4 5 密码长度大于等于8位,必须包含特殊符合_或者$,英文字母以及数字 6 7 以上两个条件同时成立注册才能成功. 8 9 10 11 * */ 12 13 import java.util.Scanner; 14 15 import java.util.regex.Matcher; 16 17 i

密码强度判断

如图 ====================== ==================HTML======================== <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"><html> <head> <title> Reset password</title> <meta http-equiv="content-

JS简单验证password强度

<input type="password" id="password" value=""/><button id="validate">验证</button> <script type="text/javascript"> $("#validate").click(function(){ if(isSimplePwd($("#p

Js判断密码强度并显示提示信息

用javascipt实现的Ajax判断密码强弱的功能,大多数有用户注册功能的网站,都会有这么一个功能,作为WEB程序员,应该会写这种小模块哦,不懂的就看下这个例子,觉得挺简单,当初帮助了不少人学会了密码强度的检测. 表单部分,用来显示密码框和密码强度提示信息: <form name=form1 action="" > 请设置密码:<input type="password" size="10" onKeyUp="pwS

【课上OJ】判断密码强度

一个判断密码强度问题: 假设允许采用以下四类字符作为密码: (1)大写英文字母,(2)小写英文字母,(3)数字0-9,(4)特殊符号 @ - _ # ~ 对密码强度做以下规定: Best: 长度>=16,且包含以上四类字符,且每类至少有两个不同的字符 Strong: 不符合Best规定,但长度>=10,且包含以上四类字符 Medium: 不符合Best.Strong规定,但长度>=8,且包含以上至少三类字符 Weak:不符合Best.Strong.Medium规定. 现给你一个密码组合,

js判断密码强度

html代码: 1 <form name="form1" action=""> 2 密码:<input type="password" size="8" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)"> 3 <br> 4 密码强度: 5 <table width=&

js动态判断密码强度

// 网上拷贝的代码,效果不太好需要自己调整<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt

Js判断密码强度代码

以前不知道密码强度是怎么搞的,今天看了一下网上写的,好像是这样的,就4个模式 数字,小写字母,大写字母,其他字符 只出现其中的一种为弱 出现其中2种为中 出现2种以上为高 1 /*每个字符对应的模式 => 1,2,4,8对应二进制*/ 2 function everycharmod(i){ 3 if(i >= 'a' && i <= 'z'){ 4 return 1; 5 }else if(i >= 'A' && i <= 'Z'){ 6 re

利用JavaScript来实现用动态检验密码强度

平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时,会有一个类似于进度条的长条进行提示用户输入的密码强度.如下图: 我看到有些人用几张不同的图片来替换,这样似乎可以,但是不太好.所以我通过其他方式实现. 实质上这是根据用户输入的不同密码强度来改变 颜色区域的长度. 密码强度这个横条实质是一个div,其他标记也可以,div里面有一个span标记,我就是通过改变span的长度和颜色来表现密码的强度的.原理很简单,但是在操作过程中,可能会遇到一些问题很头疼. 1.先在html页面里面