|
Welcome,
Guest
|
|
Read this first!
We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.
However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.
For more information, the Support Policy is located here.
Thank you!
TOPIC: [TUTORIAL] How to make a Password Strength Meter
[TUTORIAL] How to make a Password Strength Meter 13 years 4 hours ago #17348
|
Today I will show you how to create a password strength meter for your register form. The rules are simple, using only javascript and css. First you need to have the password field.
Create password field with: Name: Password Caption: Password Additional Attribute: onkeyup="passwordStrength(this.value);" Fill in the following style in css: <style type="text/css">
#passwordStrength
{
height:10px;
display:block;
float:left;
}
.strength0
{
width:150px;
background:#cccccc;
}
.strength1
{
width:20px;
background:#ff0000;
}
.strength2
{
width:40px;
background:#ff5f5f;
}
.strength3
{
width:60px;
background:#56e500;
}
.strength4
{
background:#4dcd00;
width:80px;
}
.strength5
{
background:#399800;
width:150px;
}
</style>then fill in the following style in javascript: <script language="javascript" type="text/javascript">
function passwordStrength(password)
{
var desc = new Array();
desc[0] = "Very Weak";
desc[1] = "Weak";
desc[2] = "Better";
desc[3] = "Medium";
desc[4] = "Strong";
desc[5] = "Strongest";
var score = 0;
//if password bigger than 6 give 1 point
if (password.length > 6) score++;
//if password has both lower and uppercase characters give 1 point
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
//if password has at least one number give 1 point
if (password.match(/\d+/)) score++;
//if password has at least one special caracther give 1 point
if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
//if password bigger than 12 give another 1 point
if (password.length > 12) score++;
document.getElementById("passwordDescription").innerHTML = desc[score];
document.getElementById("passwordStrength").className = "strength" + score;
}
</script>then enter the following values under the password's class. I use XHTML Layouts with Inline (XHTML), so I change the position by using the style. <li class="rsform-block rsform-block-password">
<div class="formCaption">{Password:caption}<strong class="formRequired">*</strong></div>
<div class="formBody">{Password:body}<span class="formClr">{Password:validation}</span></div>
<div class="formDescription">{Password:description}</div>
</li>
<div style="margin-left: 184px; font-size: 10px"; id="passwordDescription">Password Strength</div>
<div style="margin-left: 184px" class="strength0" id="passwordStrength"></div>Hopefully, by sharing this knowledge will benefit all of my friends. It is very simple, see the code that I include with patience and not too rush.  If you do not understand, I'm ready to help you. If you have any comments, please provide to improve the code.  |
|
|
[TUTORIAL] How to make a Password Strength Meter 11 years 3 months ago #26258
|
|
|
|
Read this first!
We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.
However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.
For more information, the Support Policy is located here.
Thank you!
