密码强度的js插件(完成)

效果如下图:

低:

中:

高:

页面上需要绑定的id如下:

 <div class="passwordtishi f12">
                    <font class="c666">安全程度:</font>
                    <span id="strength_L">弱</span><span id="strength_M">中</span><span id="strength_H">强</span>
                </div>

引用的js如下:

//密码强度弱中强变色js

//CharMode函数
//测试某个字符是属于哪一类.
function CharMode(iN) {
    if (iN >= 48 && iN <= 57) //数字
        return 1;
    if (iN >= 65 && iN <= 90) //大写字母
        return 2;
    if (iN >= 97 && iN <= 122) //小写
        return 4;
    else
        return 8; //特殊字符
}
//bitTotal函数
//计算出当前密码当中一共有多少种模式
function bitTotal(num) {
    modes = 0;
    for (i = 0; i < 4; i++) {
        if (num & 1) modes++;
        num >>>= 1;
    }
    return modes;
}
//checkStrong函数
//返回密码的强度级别
function checkStrong(sPW) {
    if (sPW.length <= 4)
        return 0; //密码太短
    Modes = 0;
    for (i = 0; i < sPW.length; i++) {
        //测试每一个字符的类别并统计一共有多少种模式.
        Modes |= CharMode(sPW.charCodeAt(i));
    }
    return bitTotal(Modes);
}
//pwStrength函数
//当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
function pwStrength(pwd) {
    O_color = "#eeeeee";
    L_color = "#FF0000";
    M_color = "#FF9900";
    H_color = "#33CC00";
    if (pwd == null || pwd == ‘‘) {
        Lcolor = Mcolor = Hcolor = O_color;
    }
    else {
        S_level = checkStrong(pwd);
        switch (S_level) {
            case 0:
                Lcolor = Mcolor = Hcolor = O_color;
            case 1:
                Lcolor = L_color;
                Mcolor = Hcolor = O_color;
                break;
            case 2:
                Lcolor = Mcolor = M_color;
                Hcolor = O_color;
                break;
            default:
                Lcolor = Mcolor = Hcolor = H_color;
        }
    }
    document.getElementById("strength_L").style.background = Lcolor;
    document.getElementById("strength_M").style.background = Mcolor;
    document.getElementById("strength_H").style.background = Hcolor;
    return;
}
时间: 2024-10-13 07:19:14

密码强度的js插件(完成)的相关文章

密码强度应用(js)

<!-- 密码强度div --> <div id="tips" class="help-block"> <b class="fl">密码强度:</b><span></span><span></span><span></span> </div><script type="text/javascript&

使用jQuery开发一个带有密码强度检验的超酷注册页面

在今天的jQuery教程中,我们将介绍如何使用jQuery和其它相关的插件来生成一个漂亮的带有密码强度检验的注册页面,希望大家喜欢! 相关的插件和类库 complexify - 一个密码强度检验jQuery插件 justgage - 一个兼容性良好的仪表盘类库 主要功能 注册中包含一个密码强度检验组件,用户需要设置一定强度的密码才可以注册 密码强度使用仪表盘类库justgage来显示,不同的强度的密码将显示不同的颜色 密码强度符合要求后,显示注册按钮 代码说明 HTML: <div id="

jquery实现密码强度检测

jquery实现密码强度验证 jquery实现密码强度验证 JS代码: $('#pass').keyup(function(e) { var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?

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=&

mysql 5.6密码强度插件使用

在mysql 5.6对密码的强度进行了加强,推出了validate_password 插件.支持密码的强度要求. 此插件要求版本:5.6.6 以上版本安装方式: 1.安装插件:(默认安装了插件后,强度插件就启用了,关闭,需要在配置文件假如相关关闭参数) mysql>INSTALL PLUGIN validate_password SONAME 'validate_password.so'; 2.配置文件添加部分参数: [mysqld] plugin-load=validate_password.

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 http-equiv="Content-

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 检验密码强度

html 代码如下: <!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;paddi

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

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