0

我找到了这个密码验证代码，并试图弄清楚前几行的含义。即：

  • “.opts”是变量还是 Javascript 的一部分？
  • 如何将此代码“连接”到给定的 HTML 密码/文本框

代码

$.fn.passwordStrength = function (options) {

    return this.each(function () {
// BEGIN - Don't understand
        var that = this; that.opts = {};
        that.opts = $.extend({}, $.fn.passwordStrength.defaults, options);
        that.div = $(that.opts.targetDiv);
        that.defaultClass = that.div.attr('class');
        that.percents = (that.opts.classes.length) ? 100 / that.opts.classes.length : 100;
// END - Don't understand

        this.div.append("<div class='pswstr smsgns passive'></div>");
        this.div.append("<div class='pswstr lgsgns passive'></div>");
        this.div.append("<div class='pswstr numb passive'></div>");
        this.div.append("<div class='pswstr char passive'></div>");
        this.div.append("<div class='pswstr symb passive'></div>");


        var specialsymbolPassed = false;
        var smallsymbolPassed = false;
        var largesymbolPassed = false;
        var lengthPassed = false;

        var numberRegex = new RegExp("([0-9]+)");
        var smallsymbolRegex = new RegExp("([a-z]+)");
        var largesymbolRegex = new RegExp("([A-Z]+)");
        var specialsymbolRegex = new RegExp("([^A-Za-z0-9]+)");

        v = $(this).keyup(function () {
            if (typeof el == "undefined")
            { this.el = $(this); }

            var dv = $(that.opts.targetDiv);

            if (smallsymbolRegex.test(this.value)) { toogleDv($(dv).find("div.smsgns"), true); smallsymbolPassed = true; }
            else { toogleDv($(dv).find("div.smsgns"), false); smallsymbolPassed = false ; }

            if (largesymbolRegex.test(this.value)) { toogleDv($(dv).find("div.lgsgns"), true); largesymbolPassed = true; }
            else { toogleDv($(dv).find("div.lgsgns"), false); largesymbolPassed = false; }

            if (this.value.length >= 8) { toogleDv($(dv).find("div.symb"), true); lengthPassed = true; }
            else { toogleDv($(dv).find("div.symb"), false); lengthPassed = false; }

            if (specialsymbolRegex.test(this.value) || numberRegex.test(this.value)) {
                specialSymbPassed = true;
                toogleDv($(dv).find("div.char"), true);
                toogleDv($(dv).find("div.numb"), true);
                }
            else {
                toogleDv($(dv).find("div.char"), false);
                toogleDv($(dv).find("div.numb"), false); 
                specialSymbPassed = false; 
             }

//            if (numberRegex.test(this.value)) { toogleDv($(dv).find("div.numb"), true); numberPassed = true; }
//            else { toogleDv($(dv).find("div.numb"), false); numberPassed = false; }


            if (smallsymbolPassed && largesymbolPassed && lengthPassed && specialSymbPassed) {
                $(dv).parent().addClass("pass");
                $(dv).addClass("pass");
            }
            else {
                $(dv).parent().removeClass("pass");
                $(dv).removeClass("pass");
            }

            //            var s = getPasswordStrength2(this.value);
            //            var p = this.percents;
            //            var t = Math.floor(s / p);
            //            if (t > 10) { t = 10; }
            //            //if (s >= 110)
            //            //t = this.opts.classes.length - 1;
            //            this.div.removeAttr('class').addClass(this.defaultClass);
            //            if (s > 0) { this.div.addClass(this.opts.classes[t - 1]); }
        })
    });

    function toogleDv($dv, Enable) {
        if (Enable) { $dv.removeClass("passive").addClass("active"); } else { $dv.removeClass("active").addClass("passive"); }
    }

    function getPasswordStrength2(H) {
        var numberRegex = new RegExp("([0-9]+)");
        var smallsymbolRegex = new RegExp("([a-z]+)");
        var largesymbolRegex = new RegExp("([A-Z]+)");
        var specialsymbolRegex = new RegExp("([^A-Za-z0-9]+)");
        var power = 0;
        if (numberRegex.test(H)) { power += 20; }
        if (smallsymbolRegex.test(H)) { power += 20; }
        if (largesymbolRegex.test(H)) { power += 20; }
        if (specialsymbolRegex.test(H)) { power += 20; }
        var l = Math.floor(H.length / 2);
        if (l > 6) { l = 6; }
        power += l * 5;
        if (H.length < 8) { if (power > 85) { power = 85; } }
        return power;
    }
};
4

1 回答 1

0

  1. that.opts是一个变量。它是 passwordStrength 插件保存您在调用它时指定的选项的地方。$.extend()用于将作为参数提供的选项与默认值合并。

  2. 您可以像使用其他 jQuery 插件一样使用它：

$(selector).passwordStrength({ options });

在您链接到的站点的signup.js开头查看它是如何使用的。

如果你谷歌“jquery 密码强度插件”，你会发现一些其他类似的插件，它们实际上可能有文档。

于 2013-01-28T23:16:40.447 回答