jQuery密码强度插件Power PWChecker js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery密码强度插件Power PWChecker js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
    <title>jQuery密码强度插件Power PWChecker</title>
    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <link href="style/demo.css" rel="stylesheet" type="text/css" />
    <link href="style/style.css" rel="stylesheet" type="text/css" />
    <script src="js/pschecker.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
           
            //Demo code
            $('.password-container').pschecker({ onPasswordValidate: validatePassword, onPasswordMatch: matchPassword });

            var submitbutton = $('.submit-button');
            var errorBox = $('.error');
            errorBox.css('visibility', 'hidden');
            submitbutton.attr("disabled", "disabled");

            //this function will handle onPasswordValidate callback, which mererly checks the password against minimum length
            function validatePassword(isValid) {
                if (!isValid)
                    errorBox.css('visibility', 'visible');
                else
                    errorBox.css('visibility', 'hidden');
            }
            //this function will be called when both passwords match
            function matchPassword(isMatched) {
                if (isMatched) {
                    submitbutton.addClass('unlocked').removeClass('locked');
                    submitbutton.removeAttr("disabled", "disabled");
                }
                else {
                    submitbutton.attr("disabled", "disabled");
                    submitbutton.addClass('locked').removeClass('unlocked');
                }
            }
        });
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="logo">
            <img src="images/logo.jpg" alt="logo" /></div>
        <p>
            <span class="error">Password must be 8 characters long</span>
        </p>
        <div class="password-container">
            <p>
                <label>
                    Enter Password:</label>
                <input class="strong-password" type="password" />
            </p>
            <p>
                <label>
                    Confirm Password:</label>
                <input class="strong-password" type="password" />
            </p>
            <p>
                <a class="submit-button locked" href="#">Submit</a>
            </p>
            <div class="strength-indicator">
                <div class="meter">
                </div>
                Strong passwords contain 8-16 characters, do not include common words or names,
                and combine uppercase letters, lowercase letters, numbers, and symbols.
            </div>
        </div>
    </div>  
	</body>
</html>

JS代码(pschecker.js):

(function ($){
	$.fn.extend({
	pschecker:function (options){
	var settings = $.extend({
	minlength:8,maxlength:16,onPasswordValidate:null,onPasswordMatch:null}
,options);
	return this.each(function (){
	var wrapper = $('.password-container');
	var password = $('.strong-password:eq(0)',wrapper);
	var cPassword = $('.strong-password:eq(1)',wrapper);
	cPassword.removeClass('no-match');
	password.keyup(validatePassword).blur(validatePassword).focus(validatePassword);
	cPassword.keyup(validatePassword).blur(validatePassword).focus(validatePassword);
	function validatePassword(){
	var pstr = password.val().toString();
	var meter = $('.meter');
	meter.html("");
	//fires password validate event if password meets the min length requirement if (settings.onPasswordValidate != null) settings.onPasswordValidate(pstr.length >= settings.minlength);
	if (pstr.length < settings.maxlength) meter.removeClass('strong').removeClass('medium').removeClass('week');
	if (pstr.length > 0){
	var rx = new RegExp(/^(?=(.*[a-z]){
	1,}
)(?=(.*[\d]){
	1,}
)(?=(.*[\W]){
	1,}
)(?!.*\s).{
	7,30}
$/);
	if (rx.test(pstr)){
	meter.addClass('strong');
	meter.html("Strong");
}
else{
	var alpha = containsAlpha(pstr);
	var number = containsNumeric(pstr);
	var upper = containsUpperCase(pstr);
	var special = containsSpecialCharacter(pstr);
	var result = alpha + number + upper + special;
	if (result > 2){
	meter.addClass('medium');
	meter.html("Medium");
}
else{
	meter.addClass('week');
	meter.html("Week");
}
}
if (cPassword.val().toString().length > 0){
	if (pstr == cPassword.val().toString()){
	cPassword.removeClass('no-match');
	if (settings.onPasswordMatch != null) settings.onPasswordMatch(true);
}
else{
	cPassword.addClass('no-match');
	if (settings.onPasswordMatch != null) settings.onPasswordMatch(false);
}
}
else{
	cPassword.addClass('no-match');
	if (settings.onPasswordMatch != null) settings.onPasswordMatch(false);
}
}
}
function containsAlpha(str){
	var rx = new RegExp(/[a-z]/);
	if (rx.test(str)) return 1;
	return 0;
}
function containsNumeric(str){
	var rx = new RegExp(/[0-9]/);
	if (rx.test(str)) return 1;
	return 0;
}
function containsUpperCase(str){
	var rx = new RegExp(/[A-Z]/);
	if (rx.test(str)) return 1;
	return 0;
}
function containsSpecialCharacter(str){
	var rx = new RegExp(/[\W]/);
	if (rx.test(str)) return 1;
	return 0;
}
}
);
}
}
);
}
)(jQuery);

CSS代码(demo.css):

body{background-color:#232A34;padding-top:50px;font-family:Arial,Helvetica,sans-serif;font-size:12px;}
.wrapper{width:840px;height:300px;margin:auto;background-color:#fff;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;}
.logo{height:40px;padding:30px 30px 0px 30px;}
.error{color:Red;display:block;margin-left:132px;}
.submit-button{width:74px;height:20px;display:block;margin-left:312px;}
a.submit-button{text-decoration:none;color:#282834;font-size:18px;}
.locked{background-image:url(../images/locked.jpg);background-position:right;background-repeat:no-repeat;}
.unlocked{background-image:url(../images/unlocked.jpg);background-position:right;background-repeat:no-repeat;}

附件:下载该文件资源,减少时间成本(增值服务)