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

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

相关的插件和类库

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

主要功能

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

代码说明

HTML：

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

 

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

Javascript：

导入所需的类库，包括：

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

 

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

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

 

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

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

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

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

CSS代码：

1. body{
2. background: url('../images/body.png');
3. }
4.  
5. #container{
6. background: url('../images/bg.jpg');
7. padding: 30px;
8. margin-top: 150px;
9. box-shadow: 0px 0px 30px #9d7540;
10. border-radius: 5px 5px 0px 0px;
11. }
12.  
13. #page-wrap{
14. margin: 0 auto;
15. width: 310px;
16. text-align: center;
17. font-size: 14px;
18. padding:0px;
19. font-family: Arial;
20. }
21.  
22. P{
23. margin: 20px 0;
24. padding:0;
25. }
26.  
27. #title{
28. width: 292px;
29. margin: 20px 0;
30. font-size: 14px;
31. font-weight: normal;
32. font-family: Arial;
33. color: #a27942;
34. text-align:left;
35. border-left: 4px solid #6e522d;
36. border-right: 6px solid #303030;
37. border-radius: 5px;
38. padding: 12px 5px;
39. background: #303030;
40. box-shadow: 0px 0px 10px #4f3b20;
41. }
42.  
43. #msgbox{
44. color: #808080;
45. }
46.  
47. input{
48. width: 300px;
49. height: 40px;
50. box-shadow: 0px 0px 10px #4f3b20;
51. border-radius: 5px;
52. font-size: 14px;
53. font-weight: normal;
54. margin:0;
55. padding: 0 5px;
56. border: 1px solid #606060;
57. font-family: Arial;
58. background: #303030;
59. color: #CCC;
60. }
61.  
62. #complexity{
63. width: 302px;
64. padding: 5px 5px;
65. font-size: 18px;
66. font-weight: bold;
67. margin: 0px;
68. box-shadow: 0px 0px 10px #4f3b20;
69. border-radius: 5px;
70. color:#CCC;
71. background: #303030;
72. }
73.  
74. #submit{
75. display: none;
76. width: 310px;
77. }
78.  
79. #gbin1{
80. padding: 15px 0px;
81. text-align: center;
82. background: #101010;
83. color: #909090;
84. font-size:12px;
85. font-family: Arial;
86. border-radius: 0px 0px 5px 5px;
87. box-shadow: 0px 0px 20px #4f3b20;
88. }
89.  
90. #gbin1 a{
91. font-family: Arial;
92. font-size:12px;
93. color: #909090;
94. text-shadow: 1px 1px 25px #fff;
95. text-decoration: none;
96. }

 

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