Example : A password box with show/hide the contents using eyeicon.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
<script>
function showhide()
{
var x = document.getElementById("psd2");
if (x.type === "password")
{
x.type = "text";
}
else
{
x.type = "password";
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<center><br><br>
<fieldset style="width:550px">
<table>
<tr>
<td>User Name</td>
<td>:</td>
<td><input type="text" size="40px"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" size="30px" name="psd1" id="psd2" onclick="showhide()" style="background-image: url('visible.png');background-repeat:no-repeat;background-position:right;cursor:pointer"></td>
</tr>
<tr></tr>
<tr>
<td></td>
<td></td>
<td><input type="submit"><input type="reset"></td>
</tr>
</table>
</fieldset>
</center>
</form>
</body>
</html>Example : A password box with show/hide the contents using checkbox.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
<script>
function showhide()
{
var x = document.getElementById("psd2");
if (x.type === "password")
{
x.type = "text";
}
else
{
x.type = "password";
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<center><br><br>
<fieldset style="width:550px">
<table>
<tr>
<td>User Name</td>
<td>:</td>
<td><input type="text" size="40px"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" size="30px" name="psd1" id="psd2" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="checkbox" onclick="showhide()">Show Password</td>
</tr>
<tr></tr>
<tr>
<td></td>
<td></td>
<td><input type="submit"><input type="reset"></td>
</tr>
</table>
</fieldset>
</center>
</form>
</body>
</html>Example : A password box to validate at least one uppercase, lowercase, number and at least 10 characters.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
<form name="form1" method="post" action="">
<center><br><br>
<fieldset style="width:550px">
<legend>Password Validation HTML Page</legend>
<table>
<tr>
<td>User Name</td>
<td>:</td>
<td><input type="text" size="40px"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" size="30px" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{10,}" title="Password must contain at least one number, one uppercase and lowercase letter, and at least 10 or more characters." required></td>
</tr>
<!--<td><input type="password" size="30px" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,30}" title="Password must contain at least one number, one uppercase and lowercase letter, and at least 8 or maximum 30 characters." required></td>-->
<tr>
<td></td>
<td></td>
<td><input type="submit"><input type="reset"></td>
</tr>
</table>
</fieldset>
</center>
</form>
</body>
</html>
NB :
(i) ^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[*.!@$%^&(){}[]:;<>,.?/~_+-=|\]).{8,32}$
where
^ Match the beginning of the string
(?=.*[0-9]) Require at least any one digit appear anywhere in the string
(?=.*[a-z]) Require at least any one lowercase letter appear anywhere in the string
(?=.*[A-Z]) Require at least any one uppercase letter appear anywhere in the string
(?=.*[*.!@$%^&(){}[]:;<>,.?/~_+-=|\]) Require at least any one special character appear anywhere in the string
.{8,30} The password must be at least 8 characters long, but no more than 30
$ Match the end of the string.
(ii) (?=.*\d)(?=.*\W)(?=.*\[^A-Z a-z 0-9])(?=.*\x|y)(?=.*\x*)(?=.{8,30})
where
. Checks for any single character except line terminators
(?=.*\d) Checks for a digit match and require at least any one digit appear
anywheere in the string
(?=.*\W) Checks for a special character match and require at least any one digit
appear anywheere in the string
(?=.*\[^A-Z a-z 0-9]) Checks for a alphanumeric character match and require at least any one
digit appear anywheere in the string
(?=.*\x|y) Matches either x or y in a string
(?=.*\x*) Checks for x zero or more times
(?=.{8,30}) The password must be at least 8 characters long, but no more than 30
(iii) Password Strength Checker :
Strong: When the password has to meet all the requirements mentioned in the expression.
Medium: If the password is at least six characters long and meets all the other requirements, or has no digit but
meets the rest of the requirements.
Weak: If the password entered does not meet the strong or medium-level requirements, then it is weak.
0 Comments