博客

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

在线演示

相关的插件和类库

• 
  complexify
  
  – 一个密码强度检验
  
  jQuery插件
  
• 
  justgage
  
  – 一个兼容性良好的仪表盘类库

主要功能

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

代码说明

HTML：

  
  

   
   

    
    
<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>
   
   
   
   

    
    
    
    

     
     

      
      

      
      

     
     
    
    
    
    
   
   
  
  

添加电子邮件和密码输入框，及其密码强度组件。

Javascript：

导入所需的类库，包括：

  
  

   
   

    
    
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	
	<script src="js/jquery.complexify.js"></script>
	
	<script src="js/jquery.placeholder.min.js"></script>
	
	<script src="js/raphael.2.1.0.min.js"></script>
	
	<script src="js/justgage.1.0.1.min.js"></script>
   
   
  
  

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

  
  

   
   

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

以上代码中，我们使用JustGage生成需要的仪表盘。相关选项请参考代码。

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

  
  

   
   

    
    
	$("#password").complexify({}, function(valid, complexity){
				if(valid){
					$('#submit').fadeIn();
				}else{
					$('#submit').fadeOut();
				}				
				g1.refresh(Math.round(complexity));	
			});
   
   
  
  

如果符合则显示注册按钮，否则隐藏。同时刷新仪表盘的数值和颜色。

CSS代码：

  
  

   
   

    
    
body{
	background: url('../images/body.png');
}
 
#container{
	background: url('../images/bg.jpg');
	padding: 30px;
	margin-top: 150px;
	box-shadow: 0px 0px 30px #9d7540;
	border-radius: 5px 5px 0px 0px;
}
 
#page-wrap{
	margin: 0 auto;
	width: 310px;
	text-align: center;
	font-size: 14px;
	padding:0px;
	font-family: Arial;
}
 
P{
	margin: 20px 0;
	padding:0;
}
 
#title{
	width: 292px;
	margin: 20px 0;
	font-size: 14px;
	font-weight: normal;
	font-family: Arial;
	color: #a27942;
	text-align:left;
	border-left: 4px solid #6e522d;
	border-right: 6px solid #303030;
	border-radius: 5px;
	padding: 12px 5px;
	background: #303030;
	box-shadow: 0px 0px 10px #4f3b20;
}
 
#msgbox{
	color: #808080;
}
 
input{
	width: 300px;
	height: 40px;
	box-shadow: 0px 0px 10px #4f3b20;
	border-radius: 5px;
	font-size: 14px;
	font-weight: normal;
	margin:0;
	padding: 0 5px;
	border: 1px solid #606060;
	font-family: Arial;
	background: #303030;
	color: #CCC;
}
 
#complexity{
	width: 302px;
	padding: 5px 5px;
	font-size: 18px;
	font-weight: bold;
	margin: 0px;
	box-shadow: 0px 0px 10px #4f3b20;
	border-radius: 5px;
	color:#CCC;
	background: #303030;
}
 
#submit{
	display: none;
	width: 310px;
}
 
#gbin1{
	padding: 15px 0px;
	text-align: center;
	background: #101010;
	color: #909090;
	font-size:12px;
	font-family: Arial;
	border-radius: 0px 0px 5px 5px;
	box-shadow: 0px 0px 20px #4f3b20;
}
 
#gbin1 a{
	font-family: Arial;
	font-size:12px;
	color: #909090;
	text-shadow: 1px 1px 25px #fff;
	text-decoration: none;
}
   
   
   
   

    
    
    
    

     
     

      
      

      
      

     
     
    
    
    
    
   
   
  
  

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