jquery表单密码输入安全强度检测插件

所属分类：网页特效-表单验证 2023-11-03 03:30:26

8.4K 0 查看评论 (0)

查看演示登录后下载 温馨提示
登录会员即可享受免费下载我要建站

资源描述：根据特定条件计算密码的强度，并在带有自定义消息的视觉指示器工具提示中显示密码的质量。

jquery表单密码输入安全强度检测插件（共3个文件）

jquery.password-indicator.css

jquery.password-indicator.js

index.html

使用方法

code
source

$(function() {
    "use strict";

    function PasswordIndicator() {

        function passwordContainsLowercaseLetter(value) {
            return (/[a-z]/).test(value);
        }

        function passwordContainsUppercaseLetter(value) {
            return (/[A-Z]/).test(value);
        }

        function passwordContainsSpaces(value) {
            return (/ /).test(value);
        }

        function passwordContainsNumber(value) {
            return (/[0-9]/).test(value);
        }

        function passwordContainsSymbol(value) {
            var containsSymbol = false,
                symbols = "-!ยง$%&/()=?.:,~;'#+-/*\\|{}[]_<>\"".split("");

            $.each(symbols, function(index, symbol) {
                if (value.indexOf(symbol) > -1) {
                    containsSymbol = true;

                    // We found a symbol. Therefore, return false to exit $.each early (short-circuit).
                    return false;
                }
            });

            return containsSymbol;
        }

        function countSpaces(value) {
            return value.split(/ +/).length - 1;
        }

        return {
            calculate: function(value, points) {
                var score = value.length * points.forEachCharacter;

                if (passwordContainsSpaces(value)) { score += countSpaces(value) * points.forEachSpace; }
                if (passwordContainsLowercaseLetter(value)) { score += points.containsLowercaseLetter; }
                if (passwordContainsUppercaseLetter(value)) { score += points.containsUppercaseLetter; }
                if (passwordContainsNumber(value)) { score += points.containsNumber; }
                if (passwordContainsSymbol(value)) { score += points.containsSymbol; }

                return score;
            }
        };
    }

    function Indicator(indicator, settings) {
        var $indicator = $(indicator).hide();

        function getStrengthClass(score) {
            var strengthIndex = parseInt(Math.round(score * (settings.strengthClassNames.length - 1) * 100 / settings.secureStrength) / 100, 10);
            if (strengthIndex >= settings.strengthClassNames.length) {
                strengthIndex = settings.strengthClassNames.length - 1;
            }

            return settings.strengthClassNames[strengthIndex];
        }

        return {
            refresh: function(score) {
                if (score > 0) {
                    $indicator.css("display", settings.indicatorDisplayType);
                    $indicator.css(settings.cssProperties);
                } else {
                    $indicator.hide();
                }

                var strengthClass = getStrengthClass(score);
                $.each(settings.strengthClassNames, function(index, value) {
                    $indicator.removeClass(value.name);
                });
                $indicator.addClass(strengthClass.name);

                if (settings.text) {
                    $indicator.text(strengthClass.text);
                }
            }
        };
    }

    var calculator,
        defaults = {
            secureStrength: 25,

            $indicator: undefined,
            indicatorClassName: "password-strength-indicator",
            indicatorDisplayType: "inline-block",
            cssProperties: {"float": "right", "font-size": "13px"},

            text: true,

            points: {
                forEachCharacter: 1,
                forEachSpace: 1,
                containsLowercaseLetter: 2,
                containsUppercaseLetter: 2,
                containsNumber: 4,
                containsSymbol: 5
            },

            strengthClassNames: [{
                name: "very-weak",
                text: "Password strength : very weak"
              }, {
                name: "weak",
                text: "Password strength : weak"
              }, {
                name: "mediocre",
                text: "Password strength : mediocre"
              }, {
                name: "strong",
                text: "Password strength : strong"
              }, {
                name: "awesome",
                text: "Password strength : Awesome"
              }]
        },

        methods = {
            init: function(options) {
                var settings = $.extend({}, defaults, options),
                    $input = $(this),
                    $indicator = getIndicatorElement($input, settings),
                    indicator = new Indicator($indicator, settings);

                setupAutomaticIndicatorRefresh(indicator, $input, settings);

                return $input;
            },

            calculate: function(value, options) {
                var settings = $.extend(defaults, options);

                if (!calculator) {
                    calculator = new PasswordIndicator();
                }

                return calculator.calculate(value, settings.points);
            },

            defaults: function() {
                return defaults;
            }
        };

    function getIndicatorElement($input, settings) {
        var $indicator = settings.$indicator || $("<span>&nbsp;</span>").insertAfter($input);

        return $indicator.attr("class", settings.indicatorClassName);
    }

    function setupAutomaticIndicatorRefresh(indicator, $input, settings) {
        var refresh = function() {
            var password = $input.val(),
                score = methods.calculate(password, settings);

            indicator.refresh(score);
        };

        $input.on("keyup", refresh);
    }

    $.fn.PasswordIndicatorIndicator = $.fn.PasswordIndicator = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        }

        if (typeof method === "object" || !method) {
            return methods.init.apply(this, arguments);
        }

        $.error("Method " +  method + " does not exist on jQuery.PasswordIndicator");
    };
});

$(function() {
    "use strict";

    function PasswordIndicator() {

        function passwordContainsLowercaseLetter(value) {
            return (/[a-z]/).test(value);
        }

        function passwordContainsUppercaseLetter(value) {
            return (/[A-Z]/).test(value);
        }

        function passwordContainsSpaces(value) {
            return (/ /).test(value);
        }

        function passwordContainsNumber(value) {
            return (/[0-9]/).test(value);
        }

        function passwordContainsSymbol(value) {
            var containsSymbol = false,
                symbols = "-!ยง$%&/()=?.:,~;'#+-/*\\|{}[]_<>\"".split("");

            $.each(symbols, function(index, symbol) {
                if (value.indexOf(symbol) > -1) {
                    containsSymbol = true;

                    // We found a symbol. Therefore, return false to exit $.each early (short-circuit).
                    return false;
                }
            });

            return containsSymbol;
        }

        function countSpaces(value) {
            return value.split(/ +/).length - 1;
        }

        return {
            calculate: function(value, points) {
                var score = value.length * points.forEachCharacter;

                if (passwordContainsSpaces(value)) { score += countSpaces(value) * points.forEachSpace; }
                if (passwordContainsLowercaseLetter(value)) { score += points.containsLowercaseLetter; }
                if (passwordContainsUppercaseLetter(value)) { score += points.containsUppercaseLetter; }
                if (passwordContainsNumber(value)) { score += points.containsNumber; }
                if (passwordContainsSymbol(value)) { score += points.containsSymbol; }

                return score;
            }
        };
    }

    function Indicator(indicator, settings) {
        var $indicator = $(indicator).hide();

        function getStrengthClass(score) {
            var strengthIndex = parseInt(Math.round(score * (settings.strengthClassNames.length - 1) * 100 / settings.secureStrength) / 100, 10);
            if (strengthIndex >= settings.strengthClassNames.length) {
                strengthIndex = settings.strengthClassNames.length - 1;
            }

            return settings.strengthClassNames[strengthIndex];
        }

        return {
            refresh: function(score) {
                if (score > 0) {
                    $indicator.css("display", settings.indicatorDisplayType);
                    $indicator.css(settings.cssProperties);
                } else {
                    $indicator.hide();
                }

                var strengthClass = getStrengthClass(score);
                $.each(settings.strengthClassNames, function(index, value) {
                    $indicator.removeClass(value.name);
                });
                $indicator.addClass(strengthClass.name);

                if (settings.text) {
                    $indicator.text(strengthClass.text);
                }
            }
        };
    }

    var calculator,
        defaults = {
            secureStrength: 25,

            $indicator: undefined,
            indicatorClassName: "password-strength-indicator",
            indicatorDisplayType: "inline-block",
            cssProperties: {"float": "right", "font-size": "13px"},

            text: true,

            points: {
                forEachCharacter: 1,
                forEachSpace: 1,
                containsLowercaseLetter: 2,
                containsUppercaseLetter: 2,
                containsNumber: 4,
                containsSymbol: 5
            },

            strengthClassNames: [{
                name: "very-weak",
                text: "Password strength : very weak"
              }, {
                name: "weak",
                text: "Password strength : weak"
              }, {
                name: "mediocre",
                text: "Password strength : mediocre"
              }, {
                name: "strong",
                text: "Password strength : strong"
              }, {
                name: "awesome",
                text: "Password strength : Awesome"
              }]
        },

        methods = {
            init: function(options) {
                var settings = $.extend({}, defaults, options),
                    $input = $(this),
                    $indicator = getIndicatorElement($input, settings),
                    indicator = new Indicator($indicator, settings);

                setupAutomaticIndicatorRefresh(indicator, $input, settings);

                return $input;
            },

            calculate: function(value, options) {
                var settings = $.extend(defaults, options);

                if (!calculator) {
                    calculator = new PasswordIndicator();
                }

                return calculator.calculate(value, settings.points);
            },

            defaults: function() {
                return defaults;
            }
        };

    function getIndicatorElement($input, settings) {
        var $indicator = settings.$indicator || $("<span>&nbsp;</span>").insertAfter($input);

        return $indicator.attr("class", settings.indicatorClassName);
    }

    function setupAutomaticIndicatorRefresh(indicator, $input, settings) {
        var refresh = function() {
            var password = $input.val(),
                score = methods.calculate(password, settings);

            indicator.refresh(score);
        };

        $input.on("keyup", refresh);
    }

    $.fn.PasswordIndicatorIndicator = $.fn.PasswordIndicator = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        }

        if (typeof method === "object" || !method) {
            return methods.init.apply(this, arguments);
        }

        $.error("Method " +  method + " does not exist on jQuery.PasswordIndicator");
    };
});

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服