5
Tôi đang sử dụng plugin jQuery Password Strength cho Twitter Bootstrap để hiển thị độ mạnh mật khẩu. khi chúng tôi nhập mật khẩu mới, chỉ báo sẽ hiển thị cường độ của nó. tôi muốn hiển thị chỉ báo độ mạnh mật khẩu bên trong div tùy chỉnh. plugin jQuery Password Strength là như thế nàycách tùy chỉnh vị trí chỉ báo Mật khẩu 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\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~][email protected]((((([a-z0-9]{1}[a-z0-9\-]{0,62}[a-z0-9]{1})|[a-z])\.)+[a-z]{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(/[a-z]/) && score;
},
wordUppercase: function (options, word, score) {
return word.match(/[A-Z]/) && 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(/([a-z].*[A-Z])|([A-Z].*[a-z])/) && 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>tôi sẽ đánh giá cao sự giúp đỡ nào mà chúng ta có thể tùy chỉnh vị trí của chỉ số và hiển thị các chỉ số sức mạnh mật khẩu bên trong div tùy chỉnh bằng mật khẩu chỉ
Password Strength: <div id="password-indicator"></div>