javascripit实现密码强度检测代码分享

代码如下:

<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>
        密码强度检测
    </title>
    <style type="text/css">
        body{font:12px/1.5 Arial;} input{float:left;font-size:12px;width:150px;font-family:arial;border:1px
        solid #ccc;padding:3px;} input.correct{border:1px solid green;} input.error{border:1px
        solid red;} #tips{float:left;margin:2px 0 0 20px;} #tips span{float:left;width:50px;height:20px;color:#fff;overflow:hidden;background:#ccc;margin-right:2px;line-height:20px;text-align:center;}
        #tips.s1 .active{background:#f30;} #tips.s2 .active{background:#fc0;} #tips.s3
        .active{background:#cc0;} #tips.s4 .active{background:#090;}
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var oTips = document.getElementById("tips");
            var oInput = document.getElementsByTagName("input")[0];
            var aSpan = oTips.getElementsByTagName("span");
            var aStr = ["弱", "中", "强", "非常好"];
            var i = 0;

oInput.onkeyup = oInput.onfocus = oInput.onblur = function() {
                var index = checkStrong(this.value);
                this.className = index ? "correct": "error";
                oTips.className = "s" + index;
                for (i = 0; i < aSpan.length; i++) aSpan[i].className = aSpan[i].innerHTML = "";
                index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1])
            }
        };
        /** 强度规则
            + ------------------------------------------------------- +
            1) 任何少于6个字符的组合，弱；任何字符数的同类字符组合，弱；
            2) 任何字符数的两类字符组合，中；
            3) 12位字符数以下的三类或四类字符组合，强；
            4) 12位字符数以上的三类或四类字符组合，非常好。
            + ------------------------------------------------------- +
            **/
        //检测密码强度
        function checkStrong(sValue) {
            var modes = 0;
            if (sValue.length < 6) return modes;
            if (/\d/.test(sValue)) modes++; //数字
            if (/[a-z]/.test(sValue)) modes++; //小写
            if (/[A-Z]/.test(sValue)) modes++; //大写 
            if (/\W/.test(sValue)) modes++; //特殊字符
            switch (modes) {
            case 1:
                return 1;
                break;
            case 2:
                return 2;
            case 3:
            case 4:
                return sValue.length < 12 ? 3 : 4
                break;
            }
        }
    </script>
</head>

<body>
    <input type="password" value="" maxlength="16" />
    <div id="tips">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>

赞 (0)

相关推荐

  • Java随机生成手机短信验证码的方法

    本文实例讲述了Java随机生成手机短信验证码的方法.分享给大家供大家参考,具体如下: /** * 创建指定数量的随机字符串 * @param numberFlag 是否是数字 * @param length * @return */ public static String createRandom(boolean numberFlag, int length){ String retStr = ""; String strTable = numberFlag ? "1234

  • Java随机密码生成并和邮箱、手机号匹配

    废话不多说了,直接给大家贴java代码了,代码有所注释,写的不好,还请各位大家多多关照. 代码如下所示: package com.alibaba.uyuni.common.util; import java.util.Random; public class GeneratePassword { /** * 生成随机密码 * @param pwd_len * 生成的密码的总长度 * @return 密码的字符串 */ public static String genRandomNum(int p

  • java web激活邮箱并找回密码

    java web激活邮箱并找回密码

    几乎每个网站或论坛之类的用户注册后都需要通过发送邮件到邮箱激活用户,如何激活邮箱呐? 设计激活步骤: 1.发送激活操作链接地址至用户邮箱. 2.用户至邮箱查收邮件. 3.用户点击链接,跳转至成功页面(修改激活状态),激活成功. 实现: /** * 发送邮件 * * @param request * @return */ @RequestMapping(value = "/sendEmail.jhtml") @ResponseBody public String sendEmail(Ht

  • javasript实现密码的隐藏与显示

    javascript实现的查看隐藏的密码框中明文信息的方法,用户输入密码时显示星号,如何查看明文信息呢,用js可以实现查看密码框的明文. 在密码框中输入密码,会以星号来显示,文字内容被自动隐藏了. 用户输入密码时显示星号,如何查看明文信息呢,用js可以实现查看密码框的明文. 代码: <html><head><title>密码的隐藏与显示</title> </head> <body bgcolor=#fef4d9><br>&

  • java用户名密码验证示例代码分享

    类:NameII    权限:public方法:main    权限:public 参数:name,password,denglu,i;参数介绍:name,数据类型 String ,用来存储一个从 input 中获取的值,在本程序当中用作用户名的存放:password,数据类型 String ,用来存储一个从 input 中获取的值,在本程序当中用作密码的存放:denglu,数据类型 boolean,用来存储默认账户的登录状态,true 表示登录成功,false 表示尚未登录:i,数据类型 in

  • javascripit实现密码强度检测代码分享

    复制代码 代码如下: <!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 http-equiv=&

  • passwordStrength 基于jquery的密码强度检测代码使用介绍

    查看示例:DEMO  打包下载 使用很简单. 复制代码 代码如下: $('#pass').passwordStrength(); XHTML 复制代码 代码如下: <p><label>请输入密码:</label> <input type="password" id="pass" class="input" /></p> <div id="passwordStrengthD

  • 密码强度检测效果实现原理与代码

    复制代码 代码如下: <html> <head> <title>密码强度检测效果</title> <script type="text/javascript"> function chkpwd(obj){ var t=obj.value; var id=getResult(t); //定义对应的消息提示 var msg=new Array(4); msg[0]="密码过短."; msg[1]="密

  • js密码强度检测

    js密码强度检测

    本文实例讲解了js密码强度检测的实现代码,分享给大家供大家参考,具体内容如下 运行效果图: 这段JavaScript代码比较实用,它完成用户注册时判断用户输入密码的强度,分强.弱.中三等级,它可以根据用户输入的密码显示对应的密码强弱等级,方便用户改进输入. 实现代码: <html> <head> <title>JS判断密码强度</title> <script language=javascript> //判断输入密码的类型 function Ch

  • C#设计模式之Template模板方法模式实现ASP.NET自定义控件 密码强度检测功能

    C#设计模式之Template模板方法模式实现ASP.NET自定义控件 密码强度检测功能

    本文实例讲述了C#设计模式之Template模板方法模式实现ASP.NET自定义控件 密码强度检测功能.分享给大家供大家参考,具体如下: 一.理论定义 模板方法模式 预先定义实现了一些基本属性和方法,需要重新计算的部分,通过子类去重写 或  增加新方法来实现. 二.应用举例 需求描述: ASP.NET自定义控件有很多通用的属性和事件, 通过继承System.Web.UI.WebControls.WebControl类,可以实现自定义控件. WebControl拥有控件基本的方法和事件,让我们定义

  • js实现密码强度检测【附示例】

    这篇文章主要介绍了js实现密码强度检测的相关实例,第一个例子给出了全部代码,可以直接运行,第二个例子只给出了js代码,感兴趣的码农可以自己完成第二个实例. 第一个实例 这段JavaScript代码比较实用,它完成用户注册时判断用户输入密码的强度,分强.弱.中三等级,它可以根据用户输入的密码显示对应的密码强弱等级,方便用户改进输入. 实现代码: <html> <head> <title>JS判断密码强度</title> <script language=

  • jQuery密码强度检测插件passwordStrength用法实例分析

    jQuery密码强度检测插件passwordStrength用法实例分析

    本文实例讲述了jQuery密码强度检测插件passwordStrength用法.分享给大家供大家参考,具体如下: 这里赋予密码强度为10个等级(实例中的progressImg1.png是一张包含十个状态的图片),然后通过设置每 个状态的CSS样式来直观地显示当前密码的强度.其中,实现此功能的重点和难点就是通过正则进行判断等级,有兴趣的朋友可以慢慢探究. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-passwordStrength

  • JS实现的四级密码强度检测功能示例

    JS实现的四级密码强度检测功能示例

    本文实例讲述了JS实现的四级密码强度检测功能.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 密码强度检测 </title> <meta http-equiv=&quo

  • java实现的密码强度检测功能完整示例

    本文实例讲述了java实现的密码强度检测功能.分享给大家供大家参考,具体如下: CheckStrength.java文件: package com.wx.pwd; /** * 检测密码强度 * * @author venshine */ public class CheckStrength { public enum LEVEL { EASY, MIDIUM, STRONG, VERY_STRONG, EXTREMELY_STRONG } /** * NUM 数字 * SMALL_LETTER

  • C语言实现密码强度检测

    本文实例为大家分享了C语言实现密码强度检测,供大家参考,具体内容如下 1 方案得分项 一.密码长度: 公式 :+(n*4),其中n表示密码长度 二.大写字母: 公式:+((len-n)*2),其中n表示大写字母个数,len表示密码长度 三.小写字母: 公式:+((len-n)*2),其中n表示小写字母个数,len表示密码长度 四.数字: 公式:+(n*4),其中n表示数字个数 条件:满足n < len,才能得到加分,len表示密码长度 五.符号: 公式:+(n*6),其中n表示符号个数 六.位于

随机推荐