Step 1: - Create a page and go to Header Text of the page and past the following ..
<style>
#passwordStrength
{
height:10px;
display:block;
float:left;
}
.strength0
{
width:190px;
background:#cccccc;
}
.strength1
{
width:45px;
background:#ff0000;
}
.strength2
{
width:90px;
background:#ff5f5f;
}
.strength3
{
width:135px;
background:#56e500;
}
.strength4
{
background:#4dcd00;
width:160px;
}
.strength5
{
background:#399800;
width:190px;
}
</style>
Step 2. Create an password item named (P2_PASSWORD)
Go to the HTML Form Element Attributes Of P2_PASSWORD Item and past the following onkeyup="return passwordStrength();"
Go to the Pre Element Text Of P2_PASSWORD Item and past the following
<script language="javascript">
function passwordStrength(){
var pwd = document.getElementById('P2_PASSWORD');
var password = document.getElementById("P2_PASSWORD").value;
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.length > 6) score++;
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
if (password.match(/\d+/)) score++;
if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
if (password.length > 12) score++;
document.getElementById("passwordDescription").innerHTML = desc[score];
if (password.length==0) {
document.getElementById("passwordDescription").innerHTML = 'Password not entered';
}
document.getElementById("passwordStrength").className = "strength" + score;
}
</script>
Go to the Post Element Text Of P2_PASSWORD Item and past the following
<div id="passwordDescription">Password not entered</div>
<div id="passwordStrength" class="strength0">
</div>
Now run your page and check
<style>
#passwordStrength
{
height:10px;
display:block;
float:left;
}
.strength0
{
width:190px;
background:#cccccc;
}
.strength1
{
width:45px;
background:#ff0000;
}
.strength2
{
width:90px;
background:#ff5f5f;
}
.strength3
{
width:135px;
background:#56e500;
}
.strength4
{
background:#4dcd00;
width:160px;
}
.strength5
{
background:#399800;
width:190px;
}
</style>
Step 2. Create an password item named (P2_PASSWORD)
Go to the HTML Form Element Attributes Of P2_PASSWORD Item and past the following onkeyup="return passwordStrength();"
Go to the Pre Element Text Of P2_PASSWORD Item and past the following
<script language="javascript">
function passwordStrength(){
var pwd = document.getElementById('P2_PASSWORD');
var password = document.getElementById("P2_PASSWORD").value;
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.length > 6) score++;
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
if (password.match(/\d+/)) score++;
if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
if (password.length > 12) score++;
document.getElementById("passwordDescription").innerHTML = desc[score];
if (password.length==0) {
document.getElementById("passwordDescription").innerHTML = 'Password not entered';
}
document.getElementById("passwordStrength").className = "strength" + score;
}
</script>
Go to the Post Element Text Of P2_PASSWORD Item and past the following
<div id="passwordDescription">Password not entered</div>
<div id="passwordStrength" class="strength0">
</div>
Now run your page and check
Great article thanks for posting this.
ReplyDelete