jQueryを使用して、パスワード強度チェック付きのクールな登録ページを開発します.

185363 ワード
jquery
今日のjQueryチュートリアルでは、jQueryや他の関連プラグインを使用して、パスワード強度チェック付きのきれいな登録ページを生成する方法を紹介します.
オンラインデモ
関連するプラグインとクラスライブラリ
complexify-暗号強度検査jQueryプラグインjustgage-互換性の良いダッシュボードクラスライブラリ主な機能
登録にはパスワード強度検査コンポーネントが含まれており、ユーザーはに登録するために一定の強度のパスワードを設定する必要がある.
パスワード強度はダッシュボードクラスライブラリjustgageで表示され、異なる強度のパスワードは異なる色を表示します.
パスワード強度が要求に合致すると、登録ボタンが表示される.
コードの説明
HTML: 
    
    
    
    

     
     
     
     

      
      
      
      
    
       
       
       
       
  1.  id="page-wrap">
       
       
       
       
  2. 		
     id="title">      - gbtags.com
    3. 
       
       
       
       
  3. 		
    4. 
       
       
       
       
  4. 		 type="text" name="email" id="email" placeholder="    "/>
    5. 
       
       
       
       
  5. 		
    6. 
       
       
       
       
  6. 		
    7. 
       
       
       
       
  7. 		 type="password" name="password" id="password" placeholder="    "/>
    8. 
       
       
       
       
  8. 		
    9. 
       
       
       
       
  9. 		
     id="complexity">
    10. 
       
       
       
       
  10. 		
    11. 
       
       
       
       
  11. 		 type="button" name="submit" id="submit" value="  " />
    12. 
       
       
       
       
  12. 		
    13. 
       
       
       
       
  13. 		
     id="msgbox">
    14. 
       
       
       
       
  14.

 

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

Javascript：

导入所需的类库，包括：

    
    
    
    

     
     
     
     

      
      
      
      
    
       
       
       
       
  1. 	<span class="pln" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,0,0); background:transparent"> </span><span class="atn" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(102,0,102); background:transparent">src</span><span class="pun" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(102,102,0); background:transparent">=</span><span class="atv" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,136,0); background:transparent">"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"</span><span class="tag" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,0,136); background:transparent">>
    2. 
       
       
       
       
  2. 	
    3. 
       
       
       
       
  3. 	<span class="pln" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,0,0); background:transparent"> </span><span class="atn" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(102,0,102); background:transparent">src</span><span class="pun" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(102,102,0); background:transparent">=</span><span class="atv" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,136,0); background:transparent">"js/jquery.complexify.js"</span><span class="tag" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,0,136); background:transparent">>
    4. 
       
       
       
       
  4. 	
    5. 
       
       
       
       
  5. 	<span class="pln" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,0,0); background:transparent"> </span><span class="atn" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(102,0,102); background:transparent">src</span><span class="pun" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(102,102,0); background:transparent">=</span><span class="atv" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,136,0); background:transparent">"js/jquery.placeholder.min.js"</span><span class="tag" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,0,136); background:transparent">>
    6. 
       
       
       
       
  6. 	
    7. 
       
       
       
       
  7. 	<span class="pln" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,0,0); background:transparent"> </span><span class="atn" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(102,0,102); background:transparent">src</span><span class="pun" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(102,102,0); background:transparent">=</span><span class="atv" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,136,0); background:transparent">"js/raphael.2.1.0.min.js"</span><span class="tag" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,0,136); background:transparent">>
    8. 
       
       
       
       
  8. 	
    9. 
       
       
       
       
  9. 	<span class="pln" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,0,0); background:transparent"> </span><span class="atn" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(102,0,102); background:transparent">src</span><span class="pun" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(102,102,0); background:transparent">=</span><span class="atv" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,136,0); background:transparent">"js/justgage.1.0.1.min.js"</span><span class="tag" style="border:0px; margin:0px; outline:0px; padding:0px; vertical-align:baseline; color:rgb(0,0,136); background:transparent">>
    10.

 
以下は、生成ダッシュボードとそのパスワード強度コードです.
    
    
    
    

     
     
     
     

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

 
上記のコードでは、JustGageを使用して必要なダッシュボードを生成します.関連オプションはコードを参照してください.
次のコードでは、complexifyのコールバックメソッドを使用して、ユーザーが入力したパスワードの強度が要求に合っているかどうかを判断します.
    
    
    
    

     
     
     
     

      
      
      
      
    
       
       
       
       
  1. 	$("#password").complexify({}, function(valid, complexity){
    2. 
       
       
       
       
  2. 				if(valid){
    3. 
       
       
       
       
  3. 					$('#submit').fadeIn();
    4. 
       
       
       
       
  4. 				}else{
    5. 
       
       
       
       
  5. 					$('#submit').fadeOut();
    6. 
       
       
       
       
  6. 				}				
    7. 
       
       
       
       
  7. 				g1.refresh(Math.round(complexity));	
    8. 
       
       
       
       
  8. 			});
    9.

 
該当する場合は登録ボタンが表示され、そうでない場合は非表示になります.ダッシュボードの数値と色を同時にリフレッシュします.
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. }

 
コードの書き込みが完了しました.完全なコードを表示する必要がある場合は、プレゼンテーションをダウンロードしてください.みんながこの実現が好きであることを望みます!もし何か意見やアドバイスがあれば、メッセージをください.ありがとうございます.


Homesteadは他のPHPバージョンをインストールします
(2018-03-29.Python ZeroからOneまで)三、Pythonベース_3.3.7リストのループ