JavaScript To Set Password Strength By OnKey Event:
<script>
function pwstrength(pwl)
{
if(pwl>0 && pwl<=5)
{
document.getElementById('pwspan').innerHTML="Very Weak";
document.getElementById('pwspan').style.color="yellow";
document.getElementById('pwspan').style.backgroundColor="red";
}
else if(pwl>=6 && pwl<=8)
{
document.getElementById('pwspan').innerHTML="Weak";
document.getElementById('pwspan').style.color="blue";
document.getElementById('pwspan').style.backgroundColor="pink";
}
else if(pwl>=9)
{
document.getElementById('pwspan').innerHTML="Strong";
document.getElementById('pwspan').style.color="orange";
document.getElementById('pwspan').style.backgroundColor="green";
}
else
{
document.getElementById('pwspan').innerHTML="* Required";
document.getElementById('pwspan').style.color="#CCF";
document.getElementById('pwspan').style.backgroundColor='';
}
}
</script>
<body>
Enter Password:
<input type="password" name="pwd" id="pw" onKeyUP="pwstrength(this.value.length)" />
<span id="pwspan" style="color:#CCF">*Required</span>
</body>
Output:
Enter Password: *Required
<script>
function pwstrength(pwl)
{
if(pwl>0 && pwl<=5)
{
document.getElementById('pwspan').innerHTML="Very Weak";
document.getElementById('pwspan').style.color="yellow";
document.getElementById('pwspan').style.backgroundColor="red";
}
else if(pwl>=6 && pwl<=8)
{
document.getElementById('pwspan').innerHTML="Weak";
document.getElementById('pwspan').style.color="blue";
document.getElementById('pwspan').style.backgroundColor="pink";
}
else if(pwl>=9)
{
document.getElementById('pwspan').innerHTML="Strong";
document.getElementById('pwspan').style.color="orange";
document.getElementById('pwspan').style.backgroundColor="green";
}
else
{
document.getElementById('pwspan').innerHTML="* Required";
document.getElementById('pwspan').style.color="#CCF";
document.getElementById('pwspan').style.backgroundColor='';
}
}
</script>
<body>
Enter Password:
<input type="password" name="pwd" id="pw" onKeyUP="pwstrength(this.value.length)" />
<span id="pwspan" style="color:#CCF">*Required</span>
</body>
Output:
Enter Password: *Required
No comments:
Post a Comment