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

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

在线演示

相关的插件和类库

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

主要功能

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

代码说明

HTML：

    
    
    
    

     
     
     
     

      
      
      
      

       
       
       
       
 id="page-wrap">
       
       
       
       
		 id="title">注册新账号 - gbtags.com
       
       
       
       
		

       
       
       
       
		 type="text" name="email" id="email" placeholder="电子邮件"/>
       
       
       
       
		

       
       
       
       
		

       
       
       
       
		 type="password" name="password" id="password" placeholder="输入密码"/>
       
       
       
       
		

       
       
       
       
		 id="complexity">
       
       
       
       
		

       
       
       
       
		 type="button" name="submit" id="submit" value="注册" />
       
       
       
       
		

       
       
       
       
		 id="msgbox">

       
       
       
       
	

 

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

Javascript：

导入所需的类库，包括：

    
    
    
    

     
     
     
     

      
      
      
      

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

 

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

    
    
    
    

     
     
     
     

      
      
      
      

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

      
      
      
      
      

       
       
       
       

        
        
        
        

        
        
        
        

       
       
       
       
      
      
      
      
      
     
     
     
     
    
    
    
    

 

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