技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> 使用jQuery开发一个带有密码强度检验的超酷注册页面

使用jQuery开发一个带有密码强度检验的超酷注册页面

浏览:4083次  出处信息

使用jQuery开发一个带有密码强度检验的超酷注册页面

在线演示  本地下载

在今天的jQuery教程中,我们将介绍如何使用jQuery和其它相关的插件来生成一个漂亮的带有密码强度检验的注册页面,希望大家喜欢!

相关的插件和类库

主要功能

  • 注册中包含一个密码强度检验组件,用户需要设置一定强度的密码才可以注册
  • 密码强度使用仪表盘类库justgage来显示,不同的强度的密码将显示不同的颜色
  • 密码强度符合要求后,显示注册按钮

代码说明

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="page-wrap">
	<div id="title">注册新账号 - gbtags.com</div>
	<p>
	<input type="text" name="email" id="email" placeholder="电子邮件"/>
	</p>
	<p>
	<input type="password" name="password" id="password" placeholder="输入密码"/>
	</p>
	<div id="complexity"></div>
	<p>
	<input type="button" name="submit" id="submit" value="注册" />
	</p>
	<p id="msgbox"></p>
</div>

以下为生成仪表盘及其密码强度代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(function(){
	$('#submit').attr('disabled', true);
	var g1 = new JustGage({
	id: "complexity", 
	value: 0, 
	min: 0,
	max: 100,
	title: "密码强度提示",
	titleFontColor: '#9d7540',
	valueFontColor : '#CCCCCC',
	label: "points",
		levelColors: [
		  "#dfa65a",
		  "#926d3b",
		  "#584224"
		]    
	});		
	$('input[placeholder]').placeholder();
	$("#password").complexify({}, function(valid, complexity){
		if(valid){
			$('#submit').fadeIn();
		}else{
			$('#submit').fadeOut();
		}				
		g1.refresh(Math.round(complexity));	
	});
 
	$('#submit').click(function(){
		$('#msgbox').html('welcome to gbtags.com');
	});
});

以下代码中,我们使用complexify的回调方法来判断用户输入的密码强度是否符合要求:

1
2
3
4
5
6
7
8
$("#password").complexify({}, function(valid, complexity){
	if(valid){
		$('#submit').fadeIn();
	}else{
		$('#submit').fadeOut();
	}				
	g1.refresh(Math.round(complexity));	
});

代码书写完毕,如果需要查看完整代码,请下载演示。希望大家喜欢这个实现!如果你有任何意见和建议请给我们留言,谢谢!

建议继续学习:

  1. Web表单设计之注册表单    (阅读:7620)
  2. “预注册”是一把金钥匙    (阅读:4107)
  3. WEB注册表单的设计    (阅读:4072)
  4. 《Patterns for Sign Up &Ramp Up》下载    (阅读:3666)
  5. 如何设计注册激活邮件    (阅读:3197)
  6. 也说web服务的用户注册部分    (阅读:3080)
  7. 为什么一定要有密码?    (阅读:2705)
  8. 关于WEB登录注册系统的下午茶    (阅读:1945)
  9. 上海航空网站注册表单优化方案    (阅读:1924)
  10. 网站“注册流程”如何“照顾用户”?    (阅读:1515)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1