Password strength meter in APEX
Step-1:
On page HTML Header write the following code
On password item P10_PASSWORD
HTML Form element attribute: onkeyup="return passwordChanged();"
Step-3:
Create an item P10_PASSWORD_STRENGTH on right side of password item.
Display As: Display as text(escape special characters, does not save state)
Pre Element Text:
Demo Example: http://apex.oracle.com/pls/apex/f?p=KP:PSM
Refer http://www.codeassembly.com/How-to-make-a-password-strength-meter-for-your-register-form for more info.
Final output:
Thanks
On page HTML Header write the following code
<style>Step-2:
#passwordStrength
{
height:10px;
display:block;
float:left;
}
.strength0
{
width:250px;
background:#cccccc;
}
.strength1
{
width:50px;
background:#ff0000;
}
.strength2
{
width:100px;
background:#ff5f5f;
}
.strength3
{
width:150px;
background:#56e500;
}
.strength4
{
background:#4dcd00;
width:200px;
}
.strength5
{
background:#399800;
width:250px;
}
</style>
On password item P10_PASSWORD
HTML Form element attribute: onkeyup="return passwordChanged();"
Step-3:
Create an item P10_PASSWORD_STRENGTH on right side of password item.
Display As: Display as text(escape special characters, does not save state)
Pre Element Text:
<script language="javascript">
function passwordChanged(){
var pwd = document.getElementById('P10_PASSWORD_STRENGTH');
var password = document.getElementById("P10_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;
}Post Element Text:
</script>
<div id="passwordDescription">Password not entered</div>
<div id="passwordStrength" class="strength0">
</div>
Demo Example: http://apex.oracle.com/pls/apex/f?p=KP:PSM
Refer http://www.codeassembly.com/How-to-make-a-password-strength-meter-for-your-register-form for more info.
Final output:
Thanks
4 Comments:
Thanks for the update Kartik.
-
Sohil
congratulations on your website!!
Thanks.....
Kartik, thank for your great post!
Frantisek
Post a Comment
Subscribe to Post Comments [Atom]
<< Home