ở bài viết này mình sẽ chia sẽ với bạn một cách kiểm tra mật khẩu có độ mạnh hay yếu giống như các trang đăng ký nổi tiếng như google account, yahoo, zing id vv...
việc này rất quan trọng đối với những website có sử dụng chức năng đăng ký tài khoản, giúp website của bạn trở nên chuyên nghiệp hơn.
sau đây mình sẽ đưa ra năm mức độ của mật khẩu.
rất yếu - yếu - trung bình - mạnh và rất mạnh.
một mật khẩu được cho là mạnh khi bạn có 13 chữ bao gồm ký tự,chữ sô in và thường, các dấu đặc biệt..
trong bài viết này chúng ta có sử dụng
jQuery/HTML/CSS
- đầu tiên chúng ta cần dẫn tới thư viện JQuery
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.pwdMeter.js"></script>
download 2 file trên tại link :
http://pastebin.com/dXQDKhMw | jquery-1.8.0.min.js
http://pastebin.com/t7uQJc8H | jquery.pwdMeter.js
- đoạn Java Script thực thi check password
<script type="text/javascript">
$(document).ready(function(){
$("#password").pwdMeter();
});
</script>
hàm
pwdMeter() để kiểm tra. bạn có thể thay đỗi giá trị mặc định này ở file
jquery.pwdMeter.js
- tiếp theo chúng ta sẽ thêm một chút CSS
<style>
.veryweak{
color:#B40404;
}
.weak{
color:#DF7401;
}
.medium{
color:#FFFF00;
}
.strong{
color:#9AFE2E;
}
.verystrong{
color:#0B610B;
}
</style>
HTML form
thẻ span sẽ xuất ra kết quả.
<div id="grid">
<input type="password" id="password">
<span id="pwdMeter" class="neutral"></span>
</div>
ok. ở trên là mình phân tích từng phần cho các bạn mới học làm website dễ hiểu hơn, còn đây là code đầy đủ hơn.
<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>Kiểm tra độ mạnh của mật khẩu sử dụng JQuery | nguoivietcode.blogspot.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>Kiểm tra độ mạnh của mật khẩu sử dụng JQuery <a href="http://www.nguoivietcode.blogspot.com/">Blog người viết code</a></h2>
<div style="margin-left:auto;margin-right:auto; width:280px;"><input type="password" id="password" />
<span id="pwdMeter" class="neutral"></span></div><br />
</body>
</html>
vậy là hoàn thành, chúc các bạn áp dụng vào thực tế một cách hiệu quả :)
Code Java script kiểm tra độ mạnh - yếu của mật khẩu
Kiểm tra độ mạnh của mật khẩu sử dụng JQuery
Password Strength checker in jQuery.
