我正在使用 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})|[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>
如果我们可以自定义指示器的位置并在自定义 div password-indicator 中显示密码强度指示器，我将不胜感激
Password Strength: <div id="password-indicator"></div>
最佳答案
下面的代码片段正是您想要的。
说明:我刚刚添加了两个新选项: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})|[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(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>
关于javascript - 如何自定义 jQuery 密码强度指示器位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28961574/
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
我正在尝试设置一个puppet节点，但rubygems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由rubygems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚
Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack
在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/
我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为