|
|
 Danh hiệu: Advanced MemberNhóm: Moderator
Gia nhập: 05-10-2015(UTC) Bài viết: 7,494   Đến từ: Tp. Hồ Chí Minh Được cảm ơn: 21 lần trong 17 bài viết
|
This tutorial show you how to create password strength checker and its very important for your website to have some password checking on signup pages to force your users to enter a strong password. This example shows you five stages of password strength very weak, weak, medium, strong and very strong all calculated on your passwords characters and its length. If you want to make a very strong password then you have add minimum 13 digit contain numbers, latter, signs and capital latter then it will be a good and secure password. To perform this implementation there is many plugins in jQuery but as we have to give you an easiest solution so I have found this plugin pwdMeter and used this plugin. jQuery and pwdMeter include:
| <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript" src="jquery.pwdMeter.js"></script> |
jQuery to fire a call to plugin:
| <script type="text/javascript"> $(document).ready(function(){ $("#password").pwdMeter(); }); </script> |
This code call .pwdMeter(); function on document ready trigger. HTML Code:
| <div id="grid"> <input type="password" id="password"> <span id="pwdMeter" class="neutral"></span> </div> |
It will show textbox to enter password and when you enter something in password box it shows you strength in empty span. CSS Used:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <style> .veryweak{ color:#B40404; } .weak{ color:#DF7401; } .medium{ color:#FFFF00; } .strong{ color:#9AFE2E; } .verystrong{ color:#0B610B; } </style> |
In CSS we have few classes on password strength change we append class to change color of text. Final Code all together: Complete password strength checker
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>How to create Password Strength checker in jQuery | PGPGang.com</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript" src="jquery.pwdMeter.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#password").pwdMeter(); }); </script> <style> .veryweak{ color:#B40404; } .weak{ color:#DF7401; } .medium{ color:#FFFF00; } .strong{ color:#9AFE2E; } .verystrong{ color:#0B610B; } </style> </head> <body> <h2>How to create Password Strength checker in jQuery example. <a href="http://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2> <div style="margin-left:auto;margin-right:auto; width:260px;"><input type="password" id="password" /> <span id="pwdMeter" class="neutral"></span></div><br /> </body> </html> |
|
|
|
|
|
|
Di chuyển
Bạn không thể tạo chủ đề mới trong diễn đàn này.
Bạn không thể trả lời chủ đề trong diễn đàn này.
Bạn không thể xóa bài của bạn trong diễn đàn này.
Bạn không thể sửa bài của bạn trong diễn đàn này.
Bạn không thể tạo bình chọn trong diễn đàn này.
Bạn không thể bỏ phiếu bình chọn trong diễn đàn này.