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

 

• 在线演示1
•  
• 本地下载  

 

 

原文链接：http://www.gbtags.com/gb/share/5889.htm

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

相关的插件和类库

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

主要功能

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

代码说明

HTML：

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

 

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

Javascript：

导入所需的类库，包括：

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

 

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

1. $(function(){
2. $('#submit').attr('disabled',true);
4. var g1 =newJustGage({
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:0px0px30px#9d7540;
10. border-radius:5px5px0px0px;
11. }
12.  
13. #page-wrap{
14. margin:0auto;
15. width:310px;
16. text-align: center;
17. font-size:14px;
18. padding:0px;
19. font-family:Arial;
20. }
21.  
22. P{
23. margin:20px0;
24. padding:0;
25. }
26.  
27. #title{
28. width:292px;
29. margin:20px0;
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:12px5px;
39. background:#303030;
40. box-shadow:0px0px10px#4f3b20;
41. }
42.  
43. #msgbox{
44. color:#808080;
45. }
46.  
47. input{
48. width:300px;
49. height:40px;
50. box-shadow:0px0px10px#4f3b20;
51. border-radius:5px;
52. font-size:14px;
53. font-weight: normal;
54. margin:0;
55. padding:05px;
56. border:1px solid #606060;
57. font-family:Arial;
58. background:#303030;
59. color:#CCC;
60. }
61.  
62. #complexity{
63. width:302px;
64. padding:5px5px;
65. font-size:18px;
66. font-weight: bold;
67. margin:0px;
68. box-shadow:0px0px10px#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:15px0px;
81. text-align: center;
82. background:#101010;
83. color:#909090;
84. font-size:12px;
85. font-family:Arial;
86. border-radius:0px0px5px5px;
87. box-shadow:0px0px20px#4f3b20;
88. }
89.  
90. #gbin1 a{
91. font-family:Arial;
92. font-size:12px;
93. color:#909090;
94. text-shadow:1px1px25px#fff;
95. text-decoration: none;
96. }

 

 

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

原文链接：http://www.gbtags.com/gb/share/5889.htm