使用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. }

 

 

代碼書寫完畢，若是須要查看完整代碼，請下載演示。但願你們喜歡這個實現！若是你有任何意見和建議請給咱們留言，謝謝！