经验分享程序开发文档资料数据资源其它资源

jQuery密码强度验证插件js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

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

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery密码强度验证插件js代码

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery密码强度验证插件</title>
    <!--<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>-->
    <link href='css/progression.css' rel='stylesheet' type='text/css'>
    <link href='css/style.css' rel='stylesheet' type='text/css'>
</head>

<body>
    <br><br><br><br><br><br><br><br>
    <h3 class="demo" id="demo">Demo</h3>
    <form id="myform">
        <p>
            <label>Type a test password</label>
            <input type="password" id="myPassword" name="" value="">
        </p>
    </form>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/strength.js"></script>
    <script type="text/javascript" src="js/js.js"></script>
</body>
</html>

JS代码(js.js):

$(document).ready(function($){
	jQuery('#myPassword').strength({
	strengthClass:'strength',strengthMeterClass:'strength_meter',strengthButtonClass:'button_strength',strengthButtonText:'Show password',strengthButtonTextToggle:'Hide Password'}
);
	$('#demo1').click(function(e){
	$('#myPassword').focus();
}
);
}
);

JS代码(strength.js):

/*! * strength.js * Original author:@aaronlumsden * Further changes,comments:@aaronlumsden * Licensed under the MIT license */
;
	(function ( $,window,document,undefined ){
	var pluginName = "strength",defaults ={
	strengthClass:'strength',strengthMeterClass:'strength_meter',strengthButtonClass:'button_strength',strengthButtonText:'Show Password',strengthButtonTextToggle:'Hide Password'}
;
	// $('<style>body{
	background-color:red;
	color:white;
}
</style>').appendTo('head');
	function Plugin( element,options ){
	this.element = element;
	this.$elem = $(this.element);
	this.options = $.extend({
}
,defaults,options );
	this._defaults = defaults;
	this._name = pluginName;
	this.init();
}
Plugin.prototype ={
	init:function(){
	var characters = 0;
	var capitalletters = 0;
	var loweletters = 0;
	var number = 0;
	var special = 0;
	var upperCase= new RegExp('[A-Z]');
	var lowerCase= new RegExp('[a-z]');
	var numbers = new RegExp('[0-9]');
	var specialchars = new RegExp('([!,%,&,@,#,$,^,*,?,_,~])');
	function GetPercentage(a,b){
	return ((b / a) * 100);
}
function check_strength(thisval,thisid){
	if (thisval.length > 8){
	characters = 1;
}
else{
	characters = 0;
}
;
	if (thisval.match(upperCase)){
	capitalletters = 1}
else{
	capitalletters = 0;
}
;
	if (thisval.match(lowerCase)){
	loweletters = 1}
else{
	loweletters = 0;
}
;
	if (thisval.match(numbers)){
	number = 1}
else{
	number = 0;
}
;
	var total = characters + capitalletters + loweletters + number + special;
	var totalpercent = GetPercentage(7,total).toFixed(0);
	get_total(total,thisid);
}
function get_total(total,thisid){
	var thismeter = $('div[data-meter="'+thisid+'"]');
	if(total == 0){
	thismeter.removeClass().html('');
}
else if (total <= 1){
	thismeter.removeClass();
	thismeter.addClass('veryweak').html('<p>Strength:very weak</p>');
}
else if (total == 2){
	thismeter.removeClass();
	thismeter.addClass('weak').html('<p>Strength:weak</p>');
}
else if(total == 3){
	thismeter.removeClass();
	thismeter.addClass('medium').html('<p>Strength:medium</p>');
}
else{
	thismeter.removeClass();
	thismeter.addClass('strong').html('<p>Strength:strong</p>');
}
console.log(total);
}
var isShown = false;
	var strengthButtonText = this.options.strengthButtonText;
	var strengthButtonTextToggle = this.options.strengthButtonTextToggle;
	thisid = this.$elem.attr('id');
	this.$elem.addClass(this.options.strengthClass).attr('data-password',thisid).after('<input style="display:none" class="'+this.options.strengthClass+'" data-password="'+thisid+'" type="text" name="" value=""><a data-password-button="'+thisid+'" href="" class="'+this.options.strengthButtonClass+'">'+this.options.strengthButtonText+'</a><div class="'+this.options.strengthMeterClass+'"><div data-meter="'+thisid+'"><p></p></div></div>');
	this.$elem.bind('keyup keydown',function(event){
	thisval = $('#'+thisid).val();
	$('input[type="text"][data-password="'+thisid+'"]').val(thisval);
	check_strength(thisval,thisid);
}
);
	$('input[type="text"][data-password="'+thisid+'"]').bind('keyup keydown',function(event){
	thisval = $('input[type="text"][data-password="'+thisid+'"]').val();
	console.log(thisval);
	$('input[type="password"][data-password="'+thisid+'"]').val(thisval);
	check_strength(thisval,thisid);
}
);
	$(document.body).on('click','.'+this.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;
}
}
);
}
,yourOtherFunction:function(el,options){
	// some logic}
}
;
	// 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 ));
}
}
);
}
;
}
)( jQuery,window,document );

CSS代码(progression.css):

.percent{display:block;color:#fff;font-size:12px;margin-left:5px;height:auto;position:absolute;top:2px;}
.triangle_right{width:0px;height:0px;border-style:solid;border-width:7.5px 10px 7.5px 0;border-color:transparent rgba(255,255,255,.3) transparent transparent;display:block;position:absolute;left:-10px;top:10px;}
.triangle_left{width:0px;height:0px;border-style:solid;border-width:7.5px 0 7.5px 10px;border-color:transparent transparent transparent rgba(255,255,255,.3);display:block;position:absolute;right:-10px;top:10px;}
.tooltip p{color:white;margin-bottom:10px;font-size:14px;}
.percentagebarinner{width:0%;background:#FFF;height:20px;background:#6EA5E1;position:relative;}
.percentagebar{width:100%;position:relative;background:#FFF;height:20px;}

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
.strength_meter{position:absolute;left:0px;top:29px;width:100%;height:43px;z-index:-1;border-radius:5px;}
.button_strength{text-decoration:none;color:#FFF;font-size:13px;}
.strength_meter div{width:0%;height:43px;text-align:right;color:#000;line-height:43px;-webkit-transition:all .3s ease-in-out;padding-right:12px;border-radius:5px;}
.strength_meter div p{position:absolute;top:48px;right:-11px;color:#FFF;font-size:13px;}
.veryweak{background-color:#FFA0A0;border-color:#F04040!important;width:25%!important;}
.weak{background-color:#FFB78C;border-color:#FF853C!important;width:50%!important;}
.medium{background-color:#FFEC8B;border-color:#FC0!important;width:75%!important;}
.strong{background-color:#C3FF88;border-color:#8DFF1C!important;width:100%!important;}
/*SITE STYLING*/
html{background:#4EC094;font-family:'Lato',sans-serif;color:white;}
.clear{clear:both;display:block;}
h1{color:#4EC094;font-size:50px;text-align:center;padding-top:30px;margin-bottom:20px;}
h1 span{font-weight:bold;color:rgba(78,192,148,.3);}
h2,h3{color:#777;text-align:center;width:500px;margin:0 auto;}
h3{text-align:left;font-size:28px;}
h4,h5{color:#4EC094;margin-bottom:20px;font-size:19px;}
h5{font-size:16px;}
.prettyprint{padding:20px;}
p{margin-bottom:20px;color:#777;line-height:150%;}
.left,.right{width:46%;float:left;}
.left{margin-right:8%;}
.demointro{color:#FFF;width:500px;margin:0 auto;text-align:left;margin-bottom:30px;}
#mainbuttons{width:350px;margin:0 auto;}
#mainbuttons li{float:left;margin-right:10px;}
#footerlink{text-decoration:none;padding-bottom:20px;background:#FFF;width:100%;text-align:center;display:block;color:#777;}
#footerlink:hover{text-decoration:underline;}
#mainbuttons li:nth-child(2){margin-right:0px;}
#mainbuttons li a,.button{display:block;padding:10px 15px;background:#7bb7fa;color:white;width:140px;text-decoration:none;text-transform:uppercase;-webkit-transition:background .3s ease-in-out;-moz-transition:background .3s ease-in-out;-o-transition:background .3s ease-in-out;transition:background .3s ease-in-out;border:0px;}
#mainbuttons li a:hover,.button:hover{background:#6298D5;cursor:pointer;}
#myform{width:400px;margin:0 auto;position:relative;}
#myform,#myform2{width:500px;margin:0 auto;position:relative;margin-bottom:60px;}
#myform label,#myform2 label{margin-bottom:5px;display:block;text-transform:uppercase;font-size:14px;color:#3c9471;font-weight:bold;}
.white{color:#557DA8;}
#myform input[type="password"],#myform input[type="text"]{background:transparent;border:2px solid #46AC84;color:#777;font-family:"Lato",sans-serif;font-size:14px;padding:9px 5px;height:21px;text-indent:6px;-webkit-appearance:none;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-transition:border .25s linear,color .25s linear;-moz-transition:border .25s linear,color .25s linear;-o-transition:border .25s linear,color .25s linear;transition:border .25s linear,color .25s linear;-webkit-backface-visibility:hidden;width:100%;}
#myform textarea{height:80px;}
#myform input[type="password"]:focus,#myform input[type="text"]:focus{outline:0;border:2px solid white;}
#container{width:100%;background:white;}
#header{background:white;height:300px;width:100%;}
.regular-checkbox{-webkit-appearance:none;border:2px solid #6EA5E1;box-shadow:0 1px 2px rgba(0,0,0,0.05),inset 0px -15px 10px -12px rgba(0,0,0,0.05);padding:7px;border-radius:0px;display:inline-block;position:relative;margin-right:10px;}
.regular-checkbox:active,.regular-checkbox:checked:active{box-shadow:0 1px 2px rgba(0,0,0,0.05),inset 0px 1px 3px rgba(0,0,0,0.1);}
.regular-checkbox:checked{border:2px solid white;box-shadow:0 1px 2px rgba(0,0,0,0.05),inset 0px -15px 10px -12px rgba(0,0,0,0.05),inset 15px 10px -12px rgba(255,255,255,0.1);color:#99a1a7;}
.regular-checkbox:checked:after{content:'\2714';font-size:14px;position:absolute;top:-2px;left:1px;color:white;}
pre,code{font-family:"Consolas","Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;font-size:12px;line-height:18px;border:1px solid #CCC;padding:5px;margin:10px 0;overflow:hidden;background:#F8F8F8;color:#333;}
pre{margin-bottom:20px;}
.wrapper{padding:30px;width:800px;margin:0 auto;max-width:100%;margin-top:314px;}
.wrapper ul{margin-left:20px;}
.wrapper ul li{color:#777;list-style-type:disc;margin-bottom:20px;}
.wrapper h3{width:100%;margin-bottom:20px;}
hr{border:0px;width:100%;border-top:1px dotted #C0C0C0;margin-top:60px;margin-bottom:60px}
table{width:100%;color:#777;margin-bottom:20px;}
table thead tr th{font-weight:bold;}
table tr{border-bottom:1px solid #C0C0C0;}
table th,table td{padding:10px;}
table tr:nth-child(odd){background:#F8F8F8;}
table tr:hover{background:#FFF6BF;}
table thead tr,table thead tr:hover{background:none!important;}
.doclink{color:#777;display:block;margin-top:20px;font-size:11px;text-decoration:none;text-transform:uppercase;}
.doclink:hover{text-decoration:underline;}
.demo{color:#FFF;margin-top:30px;margin-bottom:30px;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
37.04 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
37.04 KB
立即下载
何晓瑾
了解
打赏作者 鼓励作者
jquery特效3
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章