你的位置:首页 > Java教程

[Java教程]使用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.  
  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. }

 

 

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