新增 PwdService 服务类方便自定义重写密码相关实现
This commit is contained in:
@@ -0,0 +1,15 @@
|
|||||||
|
.strength {position:relative;}
|
||||||
|
.strength .strength_input {position:absolute;left:0;top:0;height:30px;background:transparent;border:transparent;z-index:2;color:#333;}
|
||||||
|
.strength .strength_input:focus {background:transparent;}
|
||||||
|
.strength .strength_meter {position:absolute;left:0;top:0;width:100%;height:30px;z-index:1;border:1px solid #dedede;border-radius:4px;}
|
||||||
|
.strength .strength_meter.veryweak {border-color:#F04040!important;}
|
||||||
|
.strength .strength_meter.weak {border-color:#FF853C!important;}
|
||||||
|
.strength .strength_meter.medium {border-color:#FC0!important;}
|
||||||
|
.strength .strength_meter.strong {border-color:#8DFF1C!important;}
|
||||||
|
.strength .strength_meter div {width:0%;height:28px;text-align:right;-webkit-transition:all .3s ease-in-out;border-radius:4px;}
|
||||||
|
.strength .strength_meter div.veryweak {background-color:#FFA0A0;width:25%!important;}
|
||||||
|
.strength .strength_meter div.weak {background-color:#FFB78C;width:50%!important;}
|
||||||
|
.strength .strength_meter div.medium {background-color:#FFEC8B;width:75%!important;}
|
||||||
|
.strength .strength_meter div.strong {background-color:#C3FF88;width:100%!important;}
|
||||||
|
.strength .strength_meter div p {position:absolute;right:15px;font-size:13px;line-height:29px;font-weight:bold;color:#333}
|
||||||
|
.strength .button_strength {text-decoration:none;display:block;padding-top:43px;color:#f59942;}
|
||||||
@@ -0,0 +1,140 @@
|
|||||||
|
/*!
|
||||||
|
* strength.js
|
||||||
|
* Original author: @aaronlumsden
|
||||||
|
* Further changes, comments: jeesite
|
||||||
|
* Licensed under the MIT license
|
||||||
|
*/
|
||||||
|
;(function ($, window, document, undefined) {
|
||||||
|
|
||||||
|
var pluginName = "strength";
|
||||||
|
|
||||||
|
function Plugin(element, options) {
|
||||||
|
this.element = element;
|
||||||
|
this.$elem = $(this.element);
|
||||||
|
this.options = $.extend({}, $.fn.strength.defaults, options);
|
||||||
|
this._defaults = $.fn.strength.defaults;
|
||||||
|
this._name = pluginName;
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
Plugin.prototype = {
|
||||||
|
|
||||||
|
init : function () {
|
||||||
|
|
||||||
|
var options = this.options;
|
||||||
|
|
||||||
|
var upperCaseExp = new RegExp("[A-Z]");
|
||||||
|
var lowerCaseExp = new RegExp("[a-z]");
|
||||||
|
var numberExp = new RegExp("[0-9]");
|
||||||
|
var specialExp = new RegExp("[~!@#$%\\^&\\*()_+\\{\\}:\"\\|<>?`\\-=\\[\\];\\\'\\\\,\\./]");
|
||||||
|
|
||||||
|
function check_strength(thisval, thisid) {
|
||||||
|
var charLength = thisval.length >= 8 ? 1 : 0;
|
||||||
|
var upperCase = thisval.match(upperCaseExp) ? 1 : 0;
|
||||||
|
var lowerCase = thisval.match(lowerCaseExp) ? 1 : 0;
|
||||||
|
var number = thisval.match(numberExp) ? 1 : 0;
|
||||||
|
var special = thisval.match(specialExp) ? 1 : 0;
|
||||||
|
var total = charLength + upperCase + lowerCase + number + special;
|
||||||
|
get_total(total, thisid);
|
||||||
|
options.strengthCheck(thisval, total);
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_total(total, thisid) {
|
||||||
|
var thismeter = $('div[data-meter="' + thisid + '"]').removeClass();
|
||||||
|
thismeter.parent().removeClass().addClass(options.strengthMeterClass);
|
||||||
|
if (total == 1) {
|
||||||
|
thismeter.parent().addClass('veryweak');
|
||||||
|
thismeter.addClass('veryweak').html('<p>'+options.veryweakText+'</p>');
|
||||||
|
} else if (total == 2) {
|
||||||
|
thismeter.parent().addClass('weak');
|
||||||
|
thismeter.addClass('weak').html('<p>'+options.weakText+'</p>');
|
||||||
|
} else if (total == 3 || total == 4) {
|
||||||
|
thismeter.parent().addClass('medium');
|
||||||
|
thismeter.addClass('medium').html('<p>'+options.mediumText+'</p>');
|
||||||
|
} else if (total > 4) {
|
||||||
|
thismeter.parent().addClass('strong');
|
||||||
|
thismeter.addClass('strong').html('<p>'+options.strongText+'</p>');
|
||||||
|
} else {
|
||||||
|
thismeter.html('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var isShown = false;
|
||||||
|
var strengthButtonText = options.strengthTipText + ' ' + options.strengthButtonText;
|
||||||
|
var strengthButtonTextToggle = options.strengthTipText + ' ' + options.strengthButtonTextToggle;
|
||||||
|
|
||||||
|
var thisid = this.$elem.attr('id');
|
||||||
|
|
||||||
|
this.$elem.parent().addClass(options.strengthClass);
|
||||||
|
|
||||||
|
this.$elem.addClass(options.strengthInputClass).attr('data-password', thisid)
|
||||||
|
.after('<input style="display:none" class="' + this.$elem.attr('class') + '" data-password="'
|
||||||
|
+ thisid + '" type="text" name="" value=""><a data-password-button="' + thisid
|
||||||
|
+ '" href="javascript:" class="' + options.strengthButtonClass + '" tabindex="-1">'
|
||||||
|
+ strengthButtonText + '</a><div class="' + options.strengthMeterClass
|
||||||
|
+ '"><div data-meter="' + thisid + '"><p></p></div></div>');
|
||||||
|
|
||||||
|
this.$elem.bind('keyup keydown', function (event) {
|
||||||
|
thisval = $('#' + thisid).val();
|
||||||
|
var st = $('input[type="text"][data-password="' + thisid + '"]').val(thisval);
|
||||||
|
try{st.resetValid();}catch(e){}; // 如果表单加了验证,则验证。
|
||||||
|
check_strength(thisval, thisid);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('input[type="text"][data-password="' + thisid + '"]').bind('keyup keydown', function (event) {
|
||||||
|
thisval = $('input[type="text"][data-password="' + thisid + '"]').val();
|
||||||
|
$('input[type="password"][data-password="' + thisid + '"]').val(thisval);
|
||||||
|
check_strength(thisval, thisid);
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document.body).on('click', '.' + options.strengthButtonClass, function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
thisclass = 'hide_' + $(this).attr('class');
|
||||||
|
|
||||||
|
if (isShown) {
|
||||||
|
$('input[type="text"][data-password="' + thisid + '"]').hide();
|
||||||
|
$('input[type="password"][data-password="' + thisid + '"]').show().focus();
|
||||||
|
$('a[data-password-button="' + thisid + '"]').removeClass(thisclass).html(strengthButtonText);
|
||||||
|
isShown = false;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
$('input[type="text"][data-password="' + thisid + '"]').show().focus();
|
||||||
|
$('input[type="password"][data-password="' + thisid + '"]').hide();
|
||||||
|
$('a[data-password-button="' + thisid + '"]').addClass(thisclass).html(strengthButtonTextToggle);
|
||||||
|
isShown = true;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// A really lightweight plugin wrapper around the constructor,
|
||||||
|
// preventing against multiple instantiations
|
||||||
|
$.fn[pluginName] = function (options) {
|
||||||
|
return this.each(function () {
|
||||||
|
if (!$.data(this, "plugin_" + pluginName)) {
|
||||||
|
$.data(this, "plugin_" + pluginName, new Plugin(this, options));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn[pluginName].defaults = {
|
||||||
|
strengthClass : 'strength',
|
||||||
|
strengthInputClass : 'strength_input',
|
||||||
|
strengthMeterClass : 'strength_meter',
|
||||||
|
strengthButtonClass : 'button_strength',
|
||||||
|
strengthTipText: '建议:长度不小于8位,且包含,大写英文字母、小写英文字母、数字和符号。',
|
||||||
|
strengthButtonText: '点击显示密码。',
|
||||||
|
strengthButtonTextToggle: '点击隐藏密码。',
|
||||||
|
veryweakText: '密码太弱啦!',
|
||||||
|
weakText: '密码比较弱哦!',
|
||||||
|
mediumText: '密码较安全!',
|
||||||
|
strongText: '密码很强很安全!',
|
||||||
|
// 验证后调用方法(当前值,安全级别)
|
||||||
|
strengthCheck: function(thisval, thislevel){ }
|
||||||
|
};
|
||||||
|
|
||||||
|
})(jQuery, window, document);
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
(function($) {
|
||||||
|
|
||||||
|
$.fn.strength = $.fn.strength || {};
|
||||||
|
if (window.lang == 'en'){
|
||||||
|
$.extend(true, $.fn.strength.defaults, {
|
||||||
|
strengthTipText: 'Password no less than 8 bits in length, and included, upper case letters, lower case letters, Numbers and symbols.',
|
||||||
|
strengthButtonText: 'Click to display the password.',
|
||||||
|
strengthButtonTextToggle: 'Click the hidden password.',
|
||||||
|
veryweakText: 'Password is too weak!',
|
||||||
|
weakText: 'Password is weak!',
|
||||||
|
mediumText: 'Password is safer!',
|
||||||
|
strongText: 'Password is very strong and safe!'
|
||||||
|
});
|
||||||
|
} else if (window.lang == 'ja_JP'){
|
||||||
|
$.extend(true, $.fn.strength.defaults, {
|
||||||
|
strengthTipText: 'パスワードは长さが8ビット以内で、その中には、上のケース、下のケース、数字、記号があります。',
|
||||||
|
strengthButtonText: 'クリックしてパスワードを表示します。',
|
||||||
|
strengthButtonTextToggle: '隠れパスワードをクリックします。',
|
||||||
|
veryweakText: 'パスワードが弱すぎる!',
|
||||||
|
weakText: '体の弱いパスワードは',
|
||||||
|
mediumText: 'パスワードは!平和な',
|
||||||
|
strongText: 'パスワードは丈夫で安全です!'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
Reference in New Issue
Block a user