如何使用此 JQuery 代码来验证密码

Question

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

• ".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;
    }
};

Answer 1

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

2. 你使用它类似于其他jQuery插件：

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

在注册开始时.js在您链接到的网站上查看如何使用它。

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