使用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>
2. <script src="js/jquery.complexify.js"></script>
3. <script src="js/jquery.placeholder.min.js"></script>
4. <script src="js/raphael.2.1.0.min.js"></script>
5. <script src="js/justgage.1.0.1.min.js"></script>

 

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

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

 

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

 

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