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

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');
	});
});

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));	
});