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

 

 

 

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

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

相关的插件和类库

主要功能

  • 注册中包含一个密码强度检验组件,用户需要设置一定强度的密码才可以注册
  • 密码强度使用仪表盘类库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>
  2. <scriptsrc="js/jquery.complexify.js"></script>
  3. <scriptsrc="js/jquery.placeholder.min.js"></script>
  4. <scriptsrc="js/raphael.2.1.0.min.js"></script>
  5. <scriptsrc="js/justgage.1.0.1.min.js"></script>

 

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

  1. $(function(){
  2. $('#submit').attr('disabled',true);
  3. var g1 =newJustGage({
  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: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

 
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值