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

2019-09-05 04:00 来源:未知

第一介绍使用jQuery完成带有校验密码强度的登记页面,当然要想生成多少个优质的盈盈密码强度核查的挂号页面要有连带插件和类库同盟,具体内容如下:

行使jQuery开辟叁个包罗密码强度核查的超酷注册页面,jquery超酷

在明日的jQuery教程中,我们将介绍如何利用jQuery和其余有关的插件来生成二个安然还是的含有密码强度查验的登记页面,希望大家欣赏!

相关的插件和类库

有关的插件和类库

  •  complexify - 一个密码强度核查jQuery插件
  •  justgage - 叁个包容性特出的仪态盘类库

 complexify - 三个密码强度核查jQuery插件
 justgage - 八个包容性卓越的仪态盘类库
要害效用

重大成效

  • 挂号中包蕴一个密码强度查证组件,客商须求设置一定强度的密码才足以注册
  • 密码强度使用仪表盘类库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=";
    1. <script src="js/jquery.complexify.js"></script>
    1. <script src="js/jquery.placeholder.min.js"></script>
    1. <script src="js/raphael.2.1.0.min.js"></script>
    1. <script src="js/justgage.1.0.1.min.js"></script>

 

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

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

 

如上代码中,大家接纳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. }

 

代码书写达成,假设急需查阅完整代码,请下载演示。希望我们欢腾这些达成!如若你有其余意见和建议请给我们留言,谢谢!

在今日的jQuery教程中,大家将介绍怎样行使jQuery和其余相关的插件来生成一...

 

HTML:

<div id="page-wrap">
<div id="title">注册新账号 - gbtags.com</div>
<p>
<input type="text" name="email" id="email" placeholder="电子邮件"/>
</p>
<p>
<input type="password" name="password" id="password" placeholder="输入密码"/>
</p>
<div id="complexity"></div>
<p>
<input type="button" name="submit" id="submit" value="注册" />
</p>
<p id="msgbox"></p>
</div>

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

Javascript:

导入所需的类库,富含:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.complexify.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script src="js/raphael.2.1.0.min.js"></script>
<script src="js/justgage.1.0.1.min.js"></script>
 

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

$(function(){
$('#submit').attr('disabled', true);
var g1 = new JustGage({
id: "complexity",
value: 0,
min: 0,
max: 100,
title: "密码强度提示",
titleFontColor: '#9d7540',
valueFontColor : '#CCCCCC',
label: "points",
levelColors: [
"#dfa65a",
"#926d3b",
"#584224"
]
});
$('input[placeholder]').placeholder();
$("#password").complexify({}, function(valid, complexity){
if(valid){
$('#submit').fadeIn();
}else{
$('#submit').fadeOut();
}
g1.refresh(Math.round(complexity));
});
$('#submit').click(function(){
$('#msgbox').html('welcome to gbtags.com');
});
});

   

如上代码中,大家应用JustGage生成必要的仪表盘。相关选项请参见代码。

以下代码中,大家接纳complexify的回调方法来推断客商输入的密码强度是不是符合需要:

$("#password").complexify({}, function(valid, complexity){
if(valid){
$('#submit').fadeIn();
}else{
$('#submit').fadeOut();
}
g1.refresh(Math.round(complexity));
});

 

倘诺符合则显得注册开关,不然掩饰。同一时候刷新仪表盘的数值和颜色。

 

CSS代码:

body{
background: url('../images/body.png');
}

#container{
background: url('../images/bg.jpg');
padding: 30px;
margin-top: 150px;
box-shadow: 0px 0px 30px #9d7540;
border-radius: 5px 5px 0px 0px;
}

#page-wrap{
margin: 0 auto;
width: 310px;
text-align: center;
font-size: 14px;
padding:0px;
font-family: Arial;
}

P{
margin: 20px 0;
padding:0;
}

#title{
width: 292px;
margin: 20px 0;
font-size: 14px;
font-weight: normal;
font-family: Arial;
color: #a27942;
text-align:left;
border-left: 4px solid #6e522d;
border-right: 6px solid #303030;
border-radius: 5px;
padding: 12px 5px;
background: #303030;
box-shadow: 0px 0px 10px #4f3b20;
}

#msgbox{
color: #808080;
}

input{
width: 300px;
height: 40px;
box-shadow: 0px 0px 10px #4f3b20;
border-radius: 5px;
font-size: 14px;
font-weight: normal;
margin:0;
padding: 0 5px;
border: 1px solid #606060;
font-family: Arial;
background: #303030;
color: #CCC;
}

#complexity{
width: 302px;
padding: 5px 5px;
font-size: 18px;
font-weight: bold;
margin: 0px;
box-shadow: 0px 0px 10px #4f3b20;
border-radius: 5px;
color:#CCC;
background: #303030;
}

#submit{
display: none;
width: 310px;
}

#gbin1{
padding: 15px 0px;
text-align: center;
background: #101010;
color: #909090;
font-size:12px;
font-family: Arial;
border-radius: 0px 0px 5px 5px;
box-shadow: 0px 0px 20px #4f3b20;
}

#gbin1 a{
font-family: Arial;
font-size:12px;
color: #909090;
text-shadow: 1px 1px 25px #fff;
text-decoration: none;
}

透过相关类库和插件生成叁个不错的带有密码强度核查的注册页面,使用JQ技能完成此功效,希望大家能够喜欢。

你也许感兴趣的小说:

  • jQuery完成提醒密码强度的代码
  • jquery达成客户音信修改验证输入方法汇总
TAG标签:
版权声明:本文由990888藏宝阁发布于计算机网络,转载请注明出处:使用jQuery开发一个带有密码强度检验的超酷注册