密码低、中、高三个级别的样式设定

密码校验高中低三个级别

页面引入password.js，加入三种级别样式<style>
.safeRank{
    margin: 0 0 0 10px;
    padding:0px;
    text-align:left;
    border:0 none;
}
.safeRank ul{
    margin:0px;
    padding:0px;  
    text-align:left;
    border:0 none;
    clear: both;
    margin-top: 3px;
    overflow: hidden;
    height: 20px;
}
.safeRank li {
    width: 60px;
    list-style-position: outside;
    list-style-type: none;
}
.safeRank ul li {
    background-color: #EFEFEF;
    border: 0 none;
    color: #FFFFFF;
    float: left;
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    margin-right: 1px;
    overflow: hidden;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    width: 61px;
}

password.js内容如下

$(function($) {
    $.fn.validatePassword = function(options) {
        // 默认属性、参数
        var settings = {
            // 默认显示背景色
            initcolor : "#EFEFEF",
            // 初级颜色
            lowercolor : "#FF0000",
            // 初级颜色
            middlecolor : "#FFCC00",
            // 初级颜色
            highcolor : "#00B200",
            initminlen : 6
        };
        // 让默认参数复写plugs参数
        if (options) {
            $.extend(settings, options);
        }
        ;
        //创建样式
        createShow(this);
        // 触发校
        $(this).keyup(
                function() {
                    val = $(this).val();
                    f = checkStrong(val);
                    showTip(f, settings.highcolor, settings.middlecolor,
                            settings.lowercolor, settings.initcolor);
                });
        // 初始化密码提示框
        function createShow(obj) {
            $(obj).after("<div  class='safeRank'><ul><li id='lowercolor'>低</li><li id='middlecolor'>中</li><li id='highcolor'>高</li></ul></div>");
        }
        //显示密码强度样式
        function showTip(flag, highcolor, middlecolor, lowercolor, initcolor) {
            if (flag == 1) {
                highcolor = middlecolor = initcolor;
            } else if (flag == 2 || flag == 4) {
                highcolor = lowercolor = initcolor;
            } else {
                middlecolor = lowercolor = initcolor;
            }
            $("#lowercolor").css("background-color", lowercolor);
            $("#middlecolor").css("background-color", middlecolor);
            $("#highcolor").css("background-color", highcolor);
        }
        
        // 返回密码的强度级别
        function checkStrong(sPW) {
            if (sPW.length < settings.initminlen) {
                return 1; // 密码太短
            }
            var Modes = 0;
            /*纯数字*/
            var regNum = new RegExp("^[0-9]*$");
            /*数字和字母*/
            var regNumAndZimu = new RegExp("^[A-Za-z0-9]+$");
            /*数字和字母和符号*/
            var regNumAndZimuAndFuhao = new RegExp("[^%&',;=?$\x22]+");
            if(regNum.test(sPW)){  
                Modes=1;
            }
            else if(regNumAndZimu.test(sPW)){  
                Modes=2;
            }else if(regNumAndZimuAndFuhao.test(sPW)){
                Modes=8;
            }else{
                Modes=8;
            }
            return Modes;
        }
    }
});

初始化页面的时候加载

$("#password")为密码输入验证框对象

$("#password").validatePassword();