如何自定義jQuery密碼強度指標位置

Question

我正在使用Twitter Bootstrap的jQuery密碼強度插件來顯示密碼強度。 當我們輸入新密碼時，指標會顯示它的強度。 我想在自定義div中顯示密碼強度指示器。 jQuery密碼強度插件是這樣的

  jQuery(document).ready(function () { var options = { onLoad: function () { $('#messages').text('Start typing password'); }, onKeyUp: function (evt) { $(evt.target).pwstrength("outputErrorList"); } }; $('#new_password').pwstrength(options); }); (function ($) { "use strict"; var options = { errors: [], // Options minChar: 8, errorMessages: { password_to_short: "The Password is too short", same_as_username: "Your password cannot be the same as your username" }, scores: [17, 26, 40, 50], verdicts: ["Weak", "Normal", "Medium", "Strong", "Very Strong"], showVerdicts: true, raisePower: 1.4, usernameField: "#username", onLoad: undefined, onKeyUp: undefined, viewports: { progress: undefined, verdict: undefined, errors: undefined }, // Rules stuff ruleScores: { wordNotEmail: -100, wordLength: -100, wordSimilarToUsername: -100, wordLowercase: 1, wordUppercase: 3, wordOneNumber: 3, wordThreeNumbers: 5, wordOneSpecialChar: 3, wordTwoSpecialChar: 5, wordUpperLowerCombo: 2, wordLetterNumberCombo: 2, wordLetterNumberCharCombo: 2 }, rules: { wordNotEmail: true, wordLength: true, wordSimilarToUsername: true, wordLowercase: true, wordUppercase: true, wordOneNumber: true, wordThreeNumbers: true, wordOneSpecialChar: true, wordTwoSpecialChar: true, wordUpperLowerCombo: true, wordLetterNumberCombo: true, wordLetterNumberCharCombo: true }, validationRules: { wordNotEmail: function (options, word, score) { return word.match(/^([\\w\\!\\#$\\%\\&\\'\\*\\+\\-\\/\\=\\?\\^\\`{\\|\\}\\~]+\\.)*[\\w\\!\\#$\\%\\&\\'\\*\\+\\-\\/\\=\\?\\^\\`{\\|\\}\\~]+@((((([a-z0-9]{1}[a-z0-9\\-]{0,62}[a-z0-9]{1})|[az])\\.)+[az]{2,6})|(\\d{1,3}\\.){3}\\d{1,3}(\\:\\d{1,5})?)$/i) && score; }, wordLength: function (options, word, score) { var wordlen = word.length, lenScore = Math.pow(wordlen, options.raisePower); if (wordlen < options.minChar) { lenScore = (lenScore + score); options.errors.push(options.errorMessages.password_to_short); } return lenScore; }, wordSimilarToUsername: function (options, word, score) { var username = $(options.usernameField).val(); if (username && word.toLowerCase().match(username.toLowerCase())) { options.errors.push(options.errorMessages.same_as_username); return score; } return true; }, wordLowercase: function (options, word, score) { return word.match(/[az]/) && score; }, wordUppercase: function (options, word, score) { return word.match(/[AZ]/) && score; }, wordOneNumber : function (options, word, score) { return word.match(/\\d+/) && score; }, wordThreeNumbers : function (options, word, score) { return word.match(/(.*[0-9].*[0-9].*[0-9])/) && score; }, wordOneSpecialChar : function (options, word, score) { return word.match(/.[!,@,#,$,%,\\^,&,*,?,_,~]/) && score; }, wordTwoSpecialChar : function (options, word, score) { return word.match(/(.*[!,@,#,$,%,\\^,&,*,?,_,~].*[!,@,#,$,%,\\^,&,*,?,_,~])/) && score; }, wordUpperLowerCombo : function (options, word, score) { return word.match(/([az].*[AZ])|([AZ].*[az])/) && score; }, wordLetterNumberCombo : function (options, word, score) { return word.match(/([a-zA-Z])/) && word.match(/([0-9])/) && score; }, wordLetterNumberCharCombo : function (options, word, score) { return word.match(/([a-zA-Z0-9].*[!,@,#,$,%,\\^,&,*,?,_,~])|([!,@,#,$,%,\\^,&,*,?,_,~].*[a-zA-Z0-9])/) && score; } } }, setProgressBar = function ($el, score) { var options = $el.data("pwstrength"), progressbar = options.progressbar, $verdict; if (options.showVerdicts) { if (options.viewports.verdict) { $verdict = $(options.viewports.verdict).find(".password-verdict"); } else { $verdict = $el.parent().find(".password-verdict"); if ($verdict.length === 0) { $verdict = $('<span class="password-verdict"></span>'); $verdict.insertAfter($el); } } } if (score < options.scores[0]) { progressbar.addClass("progress-danger").removeClass("progress-warning").removeClass("progress-success"); progressbar.find(".bar").css("width", "5%"); if (options.showVerdicts) { $verdict.text(options.verdicts[0]); } } else if (score >= options.scores[0] && score < options.scores[1]) { progressbar.addClass("progress-danger").removeClass("progress-warning").removeClass("progress-success"); progressbar.find(".bar").css("width", "25%"); if (options.showVerdicts) { $verdict.text(options.verdicts[1]); } } else if (score >= options.scores[1] && score < options.scores[2]) { progressbar.addClass("progress-warning").removeClass("progress-danger").removeClass("progress-success"); progressbar.find(".bar").css("width", "50%"); if (options.showVerdicts) { $verdict.text(options.verdicts[2]); } } else if (score >= options.scores[2] && score < options.scores[3]) { progressbar.addClass("progress-warning").removeClass("progress-danger").removeClass("progress-success"); progressbar.find(".bar").css("width", "75%"); if (options.showVerdicts) { $verdict.text(options.verdicts[3]); } } else if (score >= options.scores[3]) { progressbar.addClass("progress-success").removeClass("progress-warning").removeClass("progress-danger"); progressbar.find(".bar").css("width", "100%"); if (options.showVerdicts) { $verdict.text(options.verdicts[4]); } } }, calculateScore = function ($el) { var self = this, word = $el.val(), totalScore = 0, options = $el.data("pwstrength"); $.each(options.rules, function (rule, active) { if (active === true) { var score = options.ruleScores[rule], result = options.validationRules[rule](options, word, score); if (result) { totalScore += result; } } }); setProgressBar($el, totalScore); return totalScore; }, progressWidget = function () { return '<div class="progress"><div class="bar"></div></div>'; }, methods = { init: function (settings) { var self = this, allOptions = $.extend(options, settings); return this.each(function (idx, el) { var $el = $(el), progressbar, verdict; $el.data("pwstrength", allOptions); $el.on("keyup", function (event) { var options = $el.data("pwstrength"); options.errors = []; calculateScore.call(self, $el); if ($.isFunction(options.onKeyUp)) { options.onKeyUp(event); } }); progressbar = $(progressWidget()); if (allOptions.viewports.progress) { $(allOptions.viewports.progress).append(progressbar); } else { progressbar.insertAfter($el); } progressbar.find(".bar").css("width", "0%"); $el.data("pwstrength").progressbar = progressbar; if (allOptions.showVerdicts) { verdict = $('<span class="password-verdict">' + allOptions.verdicts[0] + '</span>'); if (allOptions.viewports.verdict) { $(allOptions.viewports.verdict).append(verdict); } else { verdict.insertAfter($el); } } if ($.isFunction(allOptions.onLoad)) { allOptions.onLoad(); } }); }, destroy: function () { this.each(function (idx, el) { var $el = $(el); $el.parent().find("span.password-verdict").remove(); $el.parent().find("div.progress").remove(); $el.parent().find("ul.error-list").remove(); $el.removeData("pwstrength"); }); }, forceUpdate: function () { var self = this; this.each(function (idx, el) { var $el = $(el), options = $el.data("pwstrength"); options.errors = []; calculateScore.call(self, $el); }); }, outputErrorList: function () { this.each(function (idx, el) { var output = '<ul class="error-list">', $el = $(el), errors = $el.data("pwstrength").errors, viewports = $el.data("pwstrength").viewports, verdict; $el.parent().find("ul.error-list").remove(); if (errors.length > 0) { $.each(errors, function (i, item) { output += '<li>' + item + '</li>'; }); output += '</ul>'; if (viewports.errors) { $(viewports.errors).html(output); } else { output = $(output); verdict = $el.parent().find("span.password-verdict"); if (verdict.length > 0) { el = verdict; } output.insertAfter(el); } } }); }, addRule: function (name, method, score, active) { this.each(function (idx, el) { var options = $(el).data("pwstrength"); options.rules[name] = active; options.ruleScores[name] = score; options.validationRules[name] = method; }); }, changeScore: function (rule, score) { this.each(function (idx, el) { $(el).data("pwstrength").ruleScores[rule] = score; }); }, ruleActive: function (rule, active) { this.each(function (idx, el) { $(el).data("pwstrength").rules[rule] = active; }); } }; $.fn.pwstrength = function (method) { var result; if (methods[method]) { result = methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === "object" || !method) { result = methods.init.apply(this, arguments); } else { $.error("Method " + method + " does not exist on jQuery.pwstrength"); } return result; }; }(jQuery)); 

 @-webkit-keyframes progress-bar-stripes{from{background-position:40px 0;} to{background-position:0 0;}}@-moz-keyframes progress-bar-stripes{from{background-position:40px 0;} to{background-position:0 0;}}@-ms-keyframes progress-bar-stripes{from{background-position:40px 0;} to{background-position:0 0;}}@-o-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}@keyframes progress-bar-stripes{from{background-position:40px 0;} to{background-position:0 0;}}.progress{overflow:hidden;height:20px;margin-bottom:20px;background-color:#f7f7f7;background-image:-moz-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));background-image:-webkit-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-o-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:linear-gradient(to bottom, #f5f5f5, #f9f9f9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .progress .bar{width:0%;height:100%;color:#ffffff;float:left;font-size:12px;text-align:center;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0e90d2;background-image:-moz-linear-gradient(top, #149bdf, #0480be);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));background-image:-webkit-linear-gradient(top, #149bdf, #0480be);background-image:-o-linear-gradient(top, #149bdf, #0480be);background-image:linear-gradient(to bottom, #149bdf, #0480be);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;} .progress .bar+.bar{-webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);-moz-box-shadow:inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);} .progress-striped .bar{background-color:#149bdf;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;} .progress.active .bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;-ms-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite;} .progress-danger .bar,.progress .bar-danger{background-color:#dd514c;background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(to bottom, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0);} .progress-danger.progress-striped .bar,.progress-striped .bar-danger{background-color:#ee5f5b;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .progress-success .bar,.progress .bar-success{background-color:#5eb95e;background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(to bottom, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0);} .progress-success.progress-striped .bar,.progress-striped .bar-success{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .progress-info .bar,.progress .bar-info{background-color:#4bb1cf;background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(to bottom, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0);} .progress-info.progress-striped .bar,.progress-striped .bar-info{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .progress-warning .bar,.progress .bar-warning{background-color:#faa732;background-image:-moz-linear-gradient(top, #fbb450, #f89406);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));background-image:-webkit-linear-gradient(top, #fbb450, #f89406);background-image:-o-linear-gradient(top, #fbb450, #f89406);background-image:linear-gradient(to bottom, #fbb450, #f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);} .progress-warning.progress-striped .bar,.progress-striped .bar-warning{background-color:#fbb450;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <form> <fieldset> <legend>Please type in your password</legend> Current Password: <input type="password" id="current_password" /><br /> New Password: <input type="password" id="new_password" /> Confirm Password: <input type="password" id="confirm_password" /><br /> Password Strength: <div id="password-indicator"></div> </fieldset> </form> 

我將不勝感激，我們可以自定義指標的位置，並在自定義div 密碼指示器內顯示密碼強度指示器

Password Strength: <div id="password-indicator"></div>

Answer 1

下面的代碼段顯示了您想要的內容。

說明：我剛剛添加了兩個新選項： verdictLocation和progressBarLocation 。 這兩個新選項應包含選擇器，之后將分別移動判定和進度條。

因此，我剛才補充道

<div id="verdict-location"></div>
<div id="progress-bar-location"></div>

設置新的判決和進度條位置。

注意 ：錯誤目前在判決后設置。 如果需要，您可以遵循相同的邏輯並實現錯誤位置（即添加另一個選項）。 由你決定。

 jQuery(document).ready(function() { var options = { onLoad: function() { $('#messages').text('Start typing password'); }, onKeyUp: function(evt) { $(evt.target).pwstrength("outputErrorList"); } }; $('#new_password').pwstrength(options); }); (function($) { "use strict"; var options = { errors: [], // Options verdictLocation: '#verdict-location', // New option progressBarLocation: '#progress-bar-location', // New option minChar: 8, errorMessages: { password_to_short: "The Password is too short", same_as_username: "Your password cannot be the same as your username" }, scores: [17, 26, 40, 50], verdicts: ["Weak", "Normal", "Medium", "Strong", "Very Strong"], showVerdicts: true, raisePower: 1.4, usernameField: "#username", onLoad: undefined, onKeyUp: undefined, viewports: { progress: undefined, verdict: undefined, errors: undefined }, // Rules stuff ruleScores: { wordNotEmail: -100, wordLength: -100, wordSimilarToUsername: -100, wordLowercase: 1, wordUppercase: 3, wordOneNumber: 3, wordThreeNumbers: 5, wordOneSpecialChar: 3, wordTwoSpecialChar: 5, wordUpperLowerCombo: 2, wordLetterNumberCombo: 2, wordLetterNumberCharCombo: 2 }, rules: { wordNotEmail: true, wordLength: true, wordSimilarToUsername: true, wordLowercase: true, wordUppercase: true, wordOneNumber: true, wordThreeNumbers: true, wordOneSpecialChar: true, wordTwoSpecialChar: true, wordUpperLowerCombo: true, wordLetterNumberCombo: true, wordLetterNumberCharCombo: true }, validationRules: { wordNotEmail: function(options, word, score) { return word.match(/^([\\w\\!\\#$\\%\\&\\'\\*\\+\\-\\/\\=\\?\\^\\`{\\|\\}\\~]+\\.)*[\\w\\!\\#$\\%\\&\\'\\*\\+\\-\\/\\=\\?\\^\\`{\\|\\}\\~]+@((((([a-z0-9]{1}[a-z0-9\\-]{0,62}[a-z0-9]{1})|[az])\\.)+[az]{2,6})|(\\d{1,3}\\.){3}\\d{1,3}(\\:\\d{1,5})?)$/i) && score; }, wordLength: function(options, word, score) { var wordlen = word.length, lenScore = Math.pow(wordlen, options.raisePower); if (wordlen < options.minChar) { lenScore = (lenScore + score); options.errors.push(options.errorMessages.password_to_short); } return lenScore; }, wordSimilarToUsername: function(options, word, score) { var username = $(options.usernameField).val(); if (username && word.toLowerCase().match(username.toLowerCase())) { options.errors.push(options.errorMessages.same_as_username); return score; } return true; }, wordLowercase: function(options, word, score) { return word.match(/[az]/) && score; }, wordUppercase: function(options, word, score) { return word.match(/[AZ]/) && score; }, wordOneNumber: function(options, word, score) { return word.match(/\\d+/) && score; }, wordThreeNumbers: function(options, word, score) { return word.match(/(.*[0-9].*[0-9].*[0-9])/) && score; }, wordOneSpecialChar: function(options, word, score) { return word.match(/.[!,@,#,$,%,\\^,&,*,?,_,~]/) && score; }, wordTwoSpecialChar: function(options, word, score) { return word.match(/(.*[!,@,#,$,%,\\^,&,*,?,_,~].*[!,@,#,$,%,\\^,&,*,?,_,~])/) && score; }, wordUpperLowerCombo: function(options, word, score) { return word.match(/([az].*[AZ])|([AZ].*[az])/) && score; }, wordLetterNumberCombo: function(options, word, score) { return word.match(/([a-zA-Z])/) && word.match(/([0-9])/) && score; }, wordLetterNumberCharCombo: function(options, word, score) { return word.match(/([a-zA-Z0-9].*[!,@,#,$,%,\\^,&,*,?,_,~])|([!,@,#,$,%,\\^,&,*,?,_,~].*[a-zA-Z0-9])/) && score; } } }, setProgressBar = function($el, score) { var options = $el.data("pwstrength"), progressbar = options.progressbar, $verdict; if (options.showVerdicts) { if (options.viewports.verdict) { $verdict = $(options.viewports.verdict).find(".password-verdict"); } else { $verdict = $el.parent().find(".password-verdict"); if ($verdict.length === 0) { $verdict = $('<span class="password-verdict"></span>'); $verdict.insertAfter(options.verdictLocation); //Changed $el to option } } } if (score < options.scores[0]) { progressbar.addClass("progress-danger").removeClass("progress-warning").removeClass("progress-success"); progressbar.find(".bar").css("width", "5%"); if (options.showVerdicts) { $verdict.text(options.verdicts[0]); } } else if (score >= options.scores[0] && score < options.scores[1]) { progressbar.addClass("progress-danger").removeClass("progress-warning").removeClass("progress-success"); progressbar.find(".bar").css("width", "25%"); if (options.showVerdicts) { $verdict.text(options.verdicts[1]); } } else if (score >= options.scores[1] && score < options.scores[2]) { progressbar.addClass("progress-warning").removeClass("progress-danger").removeClass("progress-success"); progressbar.find(".bar").css("width", "50%"); if (options.showVerdicts) { $verdict.text(options.verdicts[2]); } } else if (score >= options.scores[2] && score < options.scores[3]) { progressbar.addClass("progress-warning").removeClass("progress-danger").removeClass("progress-success"); progressbar.find(".bar").css("width", "75%"); if (options.showVerdicts) { $verdict.text(options.verdicts[3]); } } else if (score >= options.scores[3]) { progressbar.addClass("progress-success").removeClass("progress-warning").removeClass("progress-danger"); progressbar.find(".bar").css("width", "100%"); if (options.showVerdicts) { $verdict.text(options.verdicts[4]); } } }, calculateScore = function($el) { var self = this, word = $el.val(), totalScore = 0, options = $el.data("pwstrength"); $.each(options.rules, function(rule, active) { if (active === true) { var score = options.ruleScores[rule], result = options.validationRules[rule](options, word, score); if (result) { totalScore += result; } } }); setProgressBar($el, totalScore); return totalScore; }, progressWidget = function() { return '<div id="password-indicator"><div class="progress"><div class="bar"></div></div></div>'; }, methods = { init: function(settings) { var self = this, allOptions = $.extend(options, settings); return this.each(function(idx, el) { var $el = $(el), progressbar, verdict; $el.data("pwstrength", allOptions); $el.on("keyup", function(event) { var options = $el.data("pwstrength"); options.errors = []; calculateScore.call(self, $el); if ($.isFunction(options.onKeyUp)) { options.onKeyUp(event); } }); progressbar = $(progressWidget()); if (allOptions.viewports.progress) { $(allOptions.viewports.progress).append(progressbar); } else { progressbar.insertAfter(options.progressBarLocation); } progressbar.find(".bar").css("width", "0%"); $el.data("pwstrength").progressbar = progressbar; if (allOptions.showVerdicts) { verdict = $('<span class="password-verdict">' + allOptions.verdicts[0] + '</span>'); if (allOptions.viewports.verdict) { $(allOptions.viewports.verdict).append(verdict); } else { verdict.insertAfter(options.verdictLocation); // Changed } } if ($.isFunction(allOptions.onLoad)) { allOptions.onLoad(); } }); }, destroy: function() { this.each(function(idx, el) { var $el = $(el); $el.parent().find("span.password-verdict").remove(); $el.parent().find("div.progress").remove(); $el.parent().find("ul.error-list").remove(); $el.removeData("pwstrength"); }); }, forceUpdate: function() { var self = this; this.each(function(idx, el) { var $el = $(el), options = $el.data("pwstrength"); options.errors = []; calculateScore.call(self, $el); }); }, outputErrorList: function() { this.each(function(idx, el) { var output = '<ul class="error-list">', $el = $(el), errors = $el.data("pwstrength").errors, viewports = $el.data("pwstrength").viewports, verdict; $el.parent().find("ul.error-list").remove(); if (errors.length > 0) { $.each(errors, function(i, item) { output += '<li>' + item + '</li>'; }); output += '</ul>'; if (viewports.errors) { $(viewports.errors).html(output); } else { output = $(output); verdict = $el.parent().find("span.password-verdict"); if (verdict.length > 0) { el = verdict; } output.insertAfter(el); } } }); }, addRule: function(name, method, score, active) { this.each(function(idx, el) { var options = $(el).data("pwstrength"); options.rules[name] = active; options.ruleScores[name] = score; options.validationRules[name] = method; }); }, changeScore: function(rule, score) { this.each(function(idx, el) { $(el).data("pwstrength").ruleScores[rule] = score; }); }, ruleActive: function(rule, active) { this.each(function(idx, el) { $(el).data("pwstrength").rules[rule] = active; }); } }; $.fn.pwstrength = function(method) { var result; if (methods[method]) { result = methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === "object" || !method) { result = methods.init.apply(this, arguments); } else { $.error("Method " + method + " does not exist on jQuery.pwstrength"); } return result; }; }(jQuery)); 

 @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-moz-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-ms-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-o-keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } .progress { overflow: hidden; height: 20px; margin-bottom: 20px; background-color: #f7f7f7; background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .progress .bar { width: 0%; height: 100%; color: #ffffff; float: left; font-size: 12px; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0e90d2; background-image: -moz-linear-gradient(top, #149bdf, #0480be); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); background-image: -webkit-linear-gradient(top, #149bdf, #0480be); background-image: -o-linear-gradient(top, #149bdf, #0480be); background-image: linear-gradient(to bottom, #149bdf, #0480be); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; } .progress .bar+.bar { -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 1px 0 0 rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); } .progress-striped .bar { background-color: #149bdf; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; -moz-background-size: 40px 40px; -o-background-size: 40px 40px; background-size: 40px 40px; } .progress.active .bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite; -ms-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } .progress-danger .bar, .progress .bar-danger { background-color: #dd514c; background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0); } .progress-danger.progress-striped .bar, .progress-striped .bar-danger { background-color: #ee5f5b; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-success .bar, .progress .bar-success { background-color: #5eb95e; background-image: -moz-linear-gradient(top, #62c462, #57a957); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); background-image: -webkit-linear-gradient(top, #62c462, #57a957); background-image: -o-linear-gradient(top, #62c462, #57a957); background-image: linear-gradient(to bottom, #62c462, #57a957); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); } .progress-success.progress-striped .bar, .progress-striped .bar-success { background-color: #62c462; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-info .bar, .progress .bar-info { background-color: #4bb1cf; background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); background-image: -o-linear-gradient(top, #5bc0de, #339bb9); background-image: linear-gradient(to bottom, #5bc0de, #339bb9); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0); } .progress-info.progress-striped .bar, .progress-striped .bar-info { background-color: #5bc0de; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-warning .bar, .progress .bar-warning { background-color: #faa732; background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #f89406); background-image: linear-gradient(to bottom, #fbb450, #f89406); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); } .progress-warning.progress-striped .bar, .progress-striped .bar-warning { background-color: #fbb450; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <form> <fieldset> <legend>Please type in your password</legend> Current Password: <input type="password" id="current_password" /> <br />New Password: <input type="password" id="new_password" />Confirm Password: <input type="password" id="confirm_password" /> <br />Password Strength: <p> ----------------------------------------------------------</p> <p> Let's move indicator and progress bar after this paragraph</p> <p> ----------------------------------------------------------</p> <div id="verdict-location"></div> <div id="progress-bar-location"></div> </fieldset> </form> 

Answer 2

 jQuery(document).ready(function() { var options = { onLoad: function() { $('#messages').text('Start typing password'); }, onKeyUp: function(evt) { $(evt.target).pwstrength("outputErrorList"); } }; $('#new_password').pwstrength(options); }); (function($) { "use strict"; var options = { errors: [], // Options verdictLocation: '#verdict-location', // New option progressBarLocation: '#progress-bar-location', // New option minChar: 8, errorMessages: { password_to_short: "The Password is too short", same_as_username: "Your password cannot be the same as your username" }, scores: [17, 26, 40, 50], verdicts: ["Weak", "Normal", "Medium", "Strong", "Very Strong"], showVerdicts: true, raisePower: 1.4, usernameField: "#username", onLoad: undefined, onKeyUp: undefined, viewports: { progress: undefined, verdict: undefined, errors: undefined }, // Rules stuff ruleScores: { wordNotEmail: -100, wordLength: -100, wordSimilarToUsername: -100, wordLowercase: 1, wordUppercase: 3, wordOneNumber: 3, wordThreeNumbers: 5, wordOneSpecialChar: 3, wordTwoSpecialChar: 5, wordUpperLowerCombo: 2, wordLetterNumberCombo: 2, wordLetterNumberCharCombo: 2 }, rules: { wordNotEmail: true, wordLength: true, wordSimilarToUsername: true, wordLowercase: true, wordUppercase: true, wordOneNumber: true, wordThreeNumbers: true, wordOneSpecialChar: true, wordTwoSpecialChar: true, wordUpperLowerCombo: true, wordLetterNumberCombo: true, wordLetterNumberCharCombo: true }, validationRules: { wordNotEmail: function(options, word, score) { return word.match(/^([\\w\\!\\#$\\%\\&\\'\\*\\+\\-\\/\\=\\?\\^\\`{\\|\\}\\~]+\\.)*[\\w\\!\\#$\\%\\&\\'\\*\\+\\-\\/\\=\\?\\^\\`{\\|\\}\\~]+@((((([a-z0-9]{1}[a-z0-9\\-]{0,62}[a-z0-9]{1})|[az])\\.)+[az]{2,6})|(\\d{1,3}\\.){3}\\d{1,3}(\\:\\d{1,5})?)$/i) && score; }, wordLength: function(options, word, score) { var wordlen = word.length, lenScore = Math.pow(wordlen, options.raisePower); if (wordlen < options.minChar) { lenScore = (lenScore + score); options.errors.push(options.errorMessages.password_to_short); } return lenScore; }, wordSimilarToUsername: function(options, word, score) { var username = $(options.usernameField).val(); if (username && word.toLowerCase().match(username.toLowerCase())) { options.errors.push(options.errorMessages.same_as_username); return score; } return true; }, wordLowercase: function(options, word, score) { return word.match(/[az]/) && score; }, wordUppercase: function(options, word, score) { return word.match(/[AZ]/) && score; }, wordOneNumber: function(options, word, score) { return word.match(/\\d+/) && score; }, wordThreeNumbers: function(options, word, score) { return word.match(/(.*[0-9].*[0-9].*[0-9])/) && score; }, wordOneSpecialChar: function(options, word, score) { return word.match(/.[!,@,#,$,%,\\^,&,*,?,_,~]/) && score; }, wordTwoSpecialChar: function(options, word, score) { return word.match(/(.*[!,@,#,$,%,\\^,&,*,?,_,~].*[!,@,#,$,%,\\^,&,*,?,_,~])/) && score; }, wordUpperLowerCombo: function(options, word, score) { return word.match(/([az].*[AZ])|([AZ].*[az])/) && score; }, wordLetterNumberCombo: function(options, word, score) { return word.match(/([a-zA-Z])/) && word.match(/([0-9])/) && score; }, wordLetterNumberCharCombo: function(options, word, score) { return word.match(/([a-zA-Z0-9].*[!,@,#,$,%,\\^,&,*,?,_,~])|([!,@,#,$,%,\\^,&,*,?,_,~].*[a-zA-Z0-9])/) && score; } } }, setProgressBar = function($el, score) { var options = $el.data("pwstrength"), progressbar = options.progressbar, $verdict; if (options.showVerdicts) { if (options.viewports.verdict) { $verdict = $(options.viewports.verdict).find(".password-verdict"); } else { $verdict = $el.parent().find(".password-verdict"); if ($verdict.length === 0) { $verdict = $('<span class="password-verdict"></span>'); $verdict.insertAfter(options.verdictLocation); //Changed $el to option } } } if (score < options.scores[0]) { progressbar.addClass("progress-danger").removeClass("progress-warning").removeClass("progress-success"); progressbar.find(".bar").css("width", "5%"); if (options.showVerdicts) { $verdict.text(options.verdicts[0]); } } else if (score >= options.scores[0] && score < options.scores[1]) { progressbar.addClass("progress-danger").removeClass("progress-warning").removeClass("progress-success"); progressbar.find(".bar").css("width", "25%"); if (options.showVerdicts) { $verdict.text(options.verdicts[1]); } } else if (score >= options.scores[1] && score < options.scores[2]) { progressbar.addClass("progress-warning").removeClass("progress-danger").removeClass("progress-success"); progressbar.find(".bar").css("width", "50%"); if (options.showVerdicts) { $verdict.text(options.verdicts[2]); } } else if (score >= options.scores[2] && score < options.scores[3]) { progressbar.addClass("progress-warning").removeClass("progress-danger").removeClass("progress-success"); progressbar.find(".bar").css("width", "75%"); if (options.showVerdicts) { $verdict.text(options.verdicts[3]); } } else if (score >= options.scores[3]) { progressbar.addClass("progress-success").removeClass("progress-warning").removeClass("progress-danger"); progressbar.find(".bar").css("width", "100%"); if (options.showVerdicts) { $verdict.text(options.verdicts[4]); } } }, calculateScore = function($el) { var self = this, word = $el.val(), totalScore = 0, options = $el.data("pwstrength"); $.each(options.rules, function(rule, active) { if (active === true) { var score = options.ruleScores[rule], result = options.validationRules[rule](options, word, score); if (result) { totalScore += result; } } }); setProgressBar($el, totalScore); return totalScore; }, progressWidget = function() { return '<div id="password-indicator"><div class="progress"><div class="bar"></div></div></div>'; }, methods = { init: function(settings) { var self = this, allOptions = $.extend(options, settings); return this.each(function(idx, el) { var $el = $(el), progressbar, verdict; $el.data("pwstrength", allOptions); $el.on("keyup", function(event) { var options = $el.data("pwstrength"); options.errors = []; calculateScore.call(self, $el); if ($.isFunction(options.onKeyUp)) { options.onKeyUp(event); } }); progressbar = $(progressWidget()); if (allOptions.viewports.progress) { $(allOptions.viewports.progress).append(progressbar); } else { progressbar.insertAfter(options.progressBarLocation); } progressbar.find(".bar").css("width", "0%"); $el.data("pwstrength").progressbar = progressbar; if (allOptions.showVerdicts) { verdict = $('<span class="password-verdict">' + allOptions.verdicts[0] + '</span>'); if (allOptions.viewports.verdict) { $(allOptions.viewports.verdict).append(verdict); } else { verdict.insertAfter(options.verdictLocation); // Changed } } if ($.isFunction(allOptions.onLoad)) { allOptions.onLoad(); } }); }, destroy: function() { this.each(function(idx, el) { var $el = $(el); $el.parent().find("span.password-verdict").remove(); $el.parent().find("div.progress").remove(); $el.parent().find("ul.error-list").remove(); $el.removeData("pwstrength"); }); }, forceUpdate: function() { var self = this; this.each(function(idx, el) { var $el = $(el), options = $el.data("pwstrength"); options.errors = []; calculateScore.call(self, $el); }); }, outputErrorList: function() { this.each(function(idx, el) { var output = '<ul class="error-list">', $el = $(el), errors = $el.data("pwstrength").errors, viewports = $el.data("pwstrength").viewports, verdict; $el.parent().find("ul.error-list").remove(); if (errors.length > 0) { $.each(errors, function(i, item) { output += '<li>' + item + '</li>'; }); output += '</ul>'; if (viewports.errors) { $(viewports.errors).html(output); } else { output = $(output); verdict = $el.parent().find("span.password-verdict"); if (verdict.length > 0) { el = verdict; } output.insertAfter(el); } } }); }, addRule: function(name, method, score, active) { this.each(function(idx, el) { var options = $(el).data("pwstrength"); options.rules[name] = active; options.ruleScores[name] = score; options.validationRules[name] = method; }); }, changeScore: function(rule, score) { this.each(function(idx, el) { $(el).data("pwstrength").ruleScores[rule] = score; }); }, ruleActive: function(rule, active) { this.each(function(idx, el) { $(el).data("pwstrength").rules[rule] = active; }); } }; $.fn.pwstrength = function(method) { var result; if (methods[method]) { result = methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === "object" || !method) { result = methods.init.apply(this, arguments); } else { $.error("Method " + method + " does not exist on jQuery.pwstrength"); } return result; }; }(jQuery)); 

 @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-moz-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-ms-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-o-keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } .progress { overflow: hidden; height: 20px; margin-bottom: 20px; background-color: #f7f7f7; background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .progress .bar { width: 0%; height: 100%; color: #ffffff; float: left; font-size: 12px; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0e90d2; background-image: -moz-linear-gradient(top, #149bdf, #0480be); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); background-image: -webkit-linear-gradient(top, #149bdf, #0480be); background-image: -o-linear-gradient(top, #149bdf, #0480be); background-image: linear-gradient(to bottom, #149bdf, #0480be); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; } .progress .bar+.bar { -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 1px 0 0 rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); } .progress-striped .bar { background-color: #149bdf; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; -moz-background-size: 40px 40px; -o-background-size: 40px 40px; background-size: 40px 40px; } .progress.active .bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite; -ms-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } .progress-danger .bar, .progress .bar-danger { background-color: #dd514c; background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0); } .progress-danger.progress-striped .bar, .progress-striped .bar-danger { background-color: #ee5f5b; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-success .bar, .progress .bar-success { background-color: #5eb95e; background-image: -moz-linear-gradient(top, #62c462, #57a957); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); background-image: -webkit-linear-gradient(top, #62c462, #57a957); background-image: -o-linear-gradient(top, #62c462, #57a957); background-image: linear-gradient(to bottom, #62c462, #57a957); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); } .progress-success.progress-striped .bar, .progress-striped .bar-success { background-color: #62c462; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-info .bar, .progress .bar-info { background-color: #4bb1cf; background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); background-image: -o-linear-gradient(top, #5bc0de, #339bb9); background-image: linear-gradient(to bottom, #5bc0de, #339bb9); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0); } .progress-info.progress-striped .bar, .progress-striped .bar-info { background-color: #5bc0de; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-warning .bar, .progress .bar-warning { background-color: #faa732; background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #f89406); background-image: linear-gradient(to bottom, #fbb450, #f89406); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); } .progress-warning.progress-striped .bar, .progress-striped .bar-warning { background-color: #fbb450; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <form> <fieldset> <legend>Please type in your password</legend> <br />Current Password:<br /> <input type="password" id="current_password" /> <br />New Password: <br /><input type="password" id="new_password" /> <br />Confirm Password:<br /> <input type="password" id="confirm_password" /><br /><br /> Password Strength: <div id="verdict-location"></div> <div id="progress-bar-location"></div> </fieldset> </form> 

通過對齊輸入字段以便用戶更清楚地查看更准確。