/**//* @projectDescription jQuery Password Strength Plugin - A jQuery plugin to provide accessibility functions
* @author Tane Piper (digitalspaghetti@gmail.com)
* @version 2.0
* @website: http://digitalspaghetti.me.uk/digitalspaghetti
http://simplythebest.net/scripts/ajax/ajax_password_strength.html
* @license MIT License: http://www.opensource.org/licenses/mit-license.php
*
* === Changelog ===
* Version 2.1 (18/05/2008)
* Added a jQuery method to add a new rule: jQuery('input[@type=password]').pstrength.addRule(name, method, score, active)
* Added a jQuery method to change a rule score: jQuery('input[@type=password]').pstrength.changeScore('one_number', 50);
* Added a jQuery method to change a rules active state: jQuery('input[@type=password]').pstrength.ruleActive('one_number', false);
* Hide the 'password to short' span if the password is more than the min chars
*
* Version 2.0 (17/05/2008)
* Completly re-wrote the plugin from scratch. Plugin now features lamda functions for validation and
* custom validation rules
* Plugin now exists in new digitalspaghetti. namespace to stop any conflits with other plugins.
* Updated documentation
*
* Version 1.4 (12/02/2008)
* Added some improvments to i18n stuff from Raffael Luthiger.
* Version 1.3 (02/01/2008)
* Changing coding style to more OO
* Added default messages object for i18n
* Changed password length score to Math.pow (thanks to Keith Mashinter for this suggestion)
* Version 1.2 (03/09/2007)
* Added more options for colors and common words
* Added common words checked to see if words like 'password' or 'qwerty' are being entered
* Added minimum characters required for password
* Re-worked scoring system to give better results
* Version 1.1 (20/08/2007)
* Changed code to be more jQuery-like
* Version 1.0 (20/07/2007)
* Initial version.
*/
// Create our namespaced object
/**//*global window */
/**//*global jQuery */
/**//*global digitalspaghetti*/
window.digitalspaghetti = window.digitalspaghetti || 
{};
digitalspaghetti.password = {
'defaults' : {
'displayMinChar': true,
'minChar': 6,
'minCharText': '',
'colors': ["#f00", "#c06", "#f60", "#3c0", "#3f0"],
'scores': [20, 30, 43, 50],
'verdicts': ['弱', '一般', '較好', '很好', '極佳'],
'raisePower': 1.4,
'debug': false
},
'ruleScores' : {
'length': 0,
'lowercase': 1,
'uppercase': 3,
'one_number': 3,
'three_numbers': 5,
'one_special_char': 3,
'two_special_char': 5,
'upper_lower_combo': 2,
'letter_number_combo': 2,
'letter_number_char_combo': 2
},
'rules' : {
'length': true,
'lowercase': true,
'uppercase': true,
'one_number': true,
'three_numbers': true,
'one_special_char': true,
'two_special_char': true,
'upper_lower_combo': true,
'letter_number_combo': true,
'letter_number_char_combo': true
},
'validationRules': {
'length': function (word, score) {
digitalspaghetti.password.tooShort = false;
var wordlen = word.length;
var lenScore = Math.pow(wordlen, digitalspaghetti.password.options.raisePower);
if (wordlen < digitalspaghetti.password.options.minChar) {
lenScore = (lenScore - 100);
digitalspaghetti.password.tooShort = true;
}
return lenScore;
},
'lowercase': function (word, score) {
return word.match(/[a-z]/) && score;
},
'uppercase': function (word, score) {
return word.match(/[A-Z]/) && score;
},
'one_number': function (word, score) {
return word.match(/\d+/) && score;
},
'three_numbers': function (word, score) {
return word.match(/(.*[0-9].*[0-9].*[0-9])/) && score;
},
'one_special_char': function (word, score) {
return word.match(/.[!,@,#,$,%,\^,&,*,?,_,~]/) && score;
},
'two_special_char': function (word, score) {
return word.match(/(.*[!,@,#,$,%,\^,&,*,?,_,~].*[!,@,#,$,%,\^,&,*,?,_,~])/) && score;
},
'upper_lower_combo': function (word, score) {
return word.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/) && score;
},
'letter_number_combo': function (word, score) {
return word.match(/([a-zA-Z])/) && word.match(/([0-9])/) && score;
},
'letter_number_char_combo' : function (word, score) {
return word.match(/([a-zA-Z0-9].*[!,@,#,$,%,\^,&,*,?,_,~])|([!,@,#,$,%,\^,&,*,?,_,~].*[a-zA-Z0-9])/) && score;
}
},
'attachWidget': function (element) {
var output = ['<div id="password-strength">'];
if (digitalspaghetti.password.options.displayMinChar && !digitalspaghetti.password.tooShort) {
output.push('<span class="password-min-char">' + digitalspaghetti.password.options.minCharText.replace('%d', digitalspaghetti.password.options.minChar) + '</span>');
}
output.push('<span class="password-strength-bar"></span>');
output.push('</div>');
output = output.join('');
jQuery(element).after(output);
},
'debugOutput': function (element) {
if (typeof console.log === 'function') {
console.log(digitalspaghetti.password);
} else {
alert(digitalspaghetti.password);
}
},
'addRule': function (name, method, score, active) {
digitalspaghetti.password.rules[name] = active;
digitalspaghetti.password.ruleScores[name] = score;
digitalspaghetti.password.validationRules[name] = method;
return true;
},
'init': function (element, options) {
digitalspaghetti.password.options = jQuery.extend({}, digitalspaghetti.password.defaults, options);
digitalspaghetti.password.attachWidget(element);
jQuery(element).keyup(function () {
digitalspaghetti.password.calculateScore(jQuery(this).val());
});
if (digitalspaghetti.password.options.debug) {
digitalspaghetti.password.debugOutput();
}
},
'calculateScore': function (word) {
digitalspaghetti.password.totalscore = 0;
digitalspaghetti.password.width = 0;
for (var key in digitalspaghetti.password.rules) if (digitalspaghetti.password.rules.hasOwnProperty(key)) {
if (digitalspaghetti.password.rules[key] === true) {
var score = digitalspaghetti.password.ruleScores[key];
var result = digitalspaghetti.password.validationRules[key](word, score);
if (result) {
digitalspaghetti.password.totalscore += result;
}
}
if (digitalspaghetti.password.totalscore <= digitalspaghetti.password.options.scores[0]) {
digitalspaghetti.password.strColor = digitalspaghetti.password.options.colors[0];
digitalspaghetti.password.strText = digitalspaghetti.password.options.verdicts[0];
digitalspaghetti.password.width = "3";
} else if (digitalspaghetti.password.totalscore > digitalspaghetti.password.options.scores[0] && digitalspaghetti.password.totalscore <= digitalspaghetti.password.options.scores[1]) {
digitalspaghetti.password.strColor = digitalspaghetti.password.options.colors[1];
digitalspaghetti.password.strText = digitalspaghetti.password.options.verdicts[1];
digitalspaghetti.password.width = "6";
} else if (digitalspaghetti.password.totalscore > digitalspaghetti.password.options.scores[1] && digitalspaghetti.password.totalscore <= digitalspaghetti.password.options.scores[2]) {
digitalspaghetti.password.strColor = digitalspaghetti.password.options.colors[2];
digitalspaghetti.password.strText = digitalspaghetti.password.options.verdicts[2];
digitalspaghetti.password.width = "9";
} else if (digitalspaghetti.password.totalscore > digitalspaghetti.password.options.scores[2] && digitalspaghetti.password.totalscore <= digitalspaghetti.password.options.scores[3]) {
digitalspaghetti.password.strColor = digitalspaghetti.password.options.colors[3];
digitalspaghetti.password.strText = digitalspaghetti.password.options.verdicts[3];
digitalspaghetti.password.width = "12";
} else {
digitalspaghetti.password.strColor = digitalspaghetti.password.options.colors[4];
digitalspaghetti.password.strText = digitalspaghetti.password.options.verdicts[4];
digitalspaghetti.password.width = "15";
}
jQuery('.password-strength-bar').stop();
if (digitalspaghetti.password.options.displayMinChar && !digitalspaghetti.password.tooShort) {
jQuery('.password-min-char').hide();
} else {
jQuery('.password-min-char').show();
}
jQuery('.password-strength-bar').animate({opacity: 0.5}, 'fast', 'linear', function () {
jQuery(this).css({'display': 'block', 'background-color': digitalspaghetti.password.strColor, 'width': digitalspaghetti.password.width + "%"}).text(digitalspaghetti.password.strText);
jQuery(this).animate({opacity: 1}, 'fast', 'linear');
});
}
}
};
jQuery.extend(jQuery.fn, {
'pstrength': function (options) {
return this.each(function () {
digitalspaghetti.password.init(this, options);
});
}
});
jQuery.extend(jQuery.fn.pstrength, {
'addRule': function (name, method, score, active) {
digitalspaghetti.password.addRule(name, method, score, active);
return true;
},
'changeScore': function (rule, score) {
digitalspaghetti.password.ruleScores[rule] = score;
return true;
},
'ruleActive': function (rule, active) {
digitalspaghetti.password.rules[rule] = active;
return true;
}
});
上述為jquery_passstrength.js
下面為測試代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquert-password-strength</title>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/digitalspaghetti.password.js"></script>
<script type="text/javascript">
$(function() {
$('#user_password').pstrength();
});
</script>
<style>
.pstrength-minchar {}{
font-size : 10px;
}
input {}{
width:180px;
height:12px;
line-height:12px;
padding:4px 0px;
border: #cfcfcf 1px solid;
color: #585858;
}
password-strength,.password-strength-bar {}{
width:300px;
}
</style>
</head>
<body>
密碼：<input type="password" id="user_password" name="user_password" />
</body>
</html>
============================================================
實現2：
=============================================================
<html>
<head>
<title>密碼強度檢測Demo</title>
<script type="text/javascript">
function passwordTest(obj){
var t=obj.value;
var id=getResult(t);
//定義對應的消息提示
var msg=new Array(4);
msg[0]="密碼過短。";
msg[1]="密碼強度差。";
msg[2]="密碼強度良好。";
msg[3]="密碼強度高。";
var sty=new Array(4);
sty[0]=-45;
sty[1]=-30;
sty[2]=-15;
sty[3]=0;
var col = new Array(4);
col[0] = "gray";
col[1] = "#50AEDD";
col[2] = "#FF8213";
col[3] = "green";
//設置顯示效果
var bImg="/img/pwdlen_dSIPeEGQWxfO.gif" //一張顯示用的圖片
var sWidth=300;
var sHeight=15;
var Bobj=document.getElementById("nodetext");
Bobj.style.fontSize="12px";
Bobj.style.color=col[id];
Bobj.style.width=sWidth + "px";
Bobj.style.height=sHeight + "px";
Bobj.style.lineHeight=sHeight + "px";
Bobj.style.background="url(" + bImg + ") no-repeat left " + sty[id] + "px";
Bobj.style.textIndent="20px";
Bobj.innerHTML="檢測提示：" + msg[id];
}
//定義檢測函數,返回0/1/2/3分別代表無效/差/一般/強
function getResult(s){
if(s.length < 4){
return 0;
}
var ls = 0;
if (s.match(/[a-z]/ig)){
ls++;
}
if (s.match(/[0-9]/ig)){
ls++;
}
if (s.match(/(.[^a-z0-9])/ig)){
ls++;
}
if (s.length < 6 && ls > 0){
ls--;
}
return ls
}
</script>
</head>
<body>
<form name="form1">
<label for="pwd">用戶密碼</label>
<input type="password" name="pwd" onKeyUp="passwordTest(this)" />
<div id="nodetext"></div>
</form>
</body>
</html>
posted on 2010-12-30 14:47
David1228 閱讀(2499)
評論(0) 編輯 收藏 所屬分類:
JQuery