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

密码校验高中低三个级别

页面引入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();