JavaScript : HTML Form validation - checking for password
Password validation
Sometimes a password validation in a form is essential. You can create a password in different ways, it's structure may be simple, reasonable or strong. Here we validate various type of password structure through JavaScript codes and regular expression.
- Check a password between 7 to 16 characters which contain only characters, numeric digits and underscore and first character must be a letter.
- Check a password between 6 to 20 characters which contain at least one numeric digit, one uppercase and one lowercase letter.
- Check a password between 7 to 15 characters which contain at least one numeric digit and a special character.
- Check a password between 8 to 15 characters which contain at least one lowercase letter, one uppercase letter, one numeric digit, and one special character.
Following code blocks contain actual codes for the said validations. We have kept the CSS code part common for all the validations.
CSS Code:
li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}
To check a password between 7 to 16 characters which contain only characters, numeric digits, underscore and first character must be a letter
To validate the said format we use the regular expression ^[A-Za-z]\w{7,15}$, where \w matches any word character (alphanumeric) including the underscore (equivalent to [A-Za-z0-9_]). Next the match() method of string object is used to match the said regular expression against the input value. Here is the complete web document.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
title>JavaScript form validation - Password Checking - 1</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Password and Submit [7 to 15 characters which contain only characters, numeric digits, underscore and first character must be a letter]</h2
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li class="rq">*Enter numbers only.</li>
<li> </li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="CheckPassword(document.form1.text1)"/></li>
<li> </li>
</ul>
</form>
</div>
<script src="check-password-1.js"></script>
</body>
</html>
JavaScript Code:
function CheckPassword(inputtxt)
{
var passw= /^[A-Za-z]\w{7,14}$/;
if(inputtxt.value.match(passw))
{
alert('Correct, try another...')
return true;
}
else
{
alert('Wrong...!')
return false;
}
}
View the example in the browser
To check a password between 6 to 20 characters which contain at least one numeric digit, one uppercase and one lowercase letter
To validate the said format we use the regular expression ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,8}$. Next the match() method of string object is used to match the said regular expression against the input value. Here is the complete web document.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - Password Checking - 2</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Password and Submit [6 to 20 characters which contain at least one numeric digit, one uppercase and one lowercase letter]</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li class="rq">*Enter numbers only.</li>
<li> </li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="CheckPassword(document.form1.text1)"/></li>
<li> </li>
</ul>
</form>
</div>
<script src="check-password-2.js"></script>
</body>
</html>
JavaScript Code:
function CheckPassword(inputtxt)
{
var passw = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/;
if(inputtxt.value.match(passw))
{
alert('Correct, try another...')
return true;
}
else
{
alert('Wrong...!')
return false;
}
}
View the example in the browser
To check a password between 7 to 15 characters which contain at least one numeric digit and a special character
To validate the said format we use the regular expression ^^(?=.*[0-9])(?=.*[[email protected]#$%^&*])[[email protected]#$%^&*]{7,15}$. Next the match() method of string object is used to match the said regular expression against the input value. Here is the complete web document.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - Password Checking - 3</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Password and Submit [7 to 15 characters which contain at least one numeric digit and a special character]</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li class="rq">*Enter numbers only.</li>
<li> </li>
<li><input type="submit" name="submit" value="Submit" onclick="allnumericplusminus(document.form1.text1)" /></li>
<li> </li>
</ul>
</form>
</div>
<script src="check-password-3.js"></script>
</body>
</html>
JavaScript Code
function CheckPassword(inputtxt)
{
var paswd= /^(?=.*[0-9])(?=.*[[email protected]#$%^&*])[[email protected]#$%^&*]{7,15}$/;
if(inputtxt.value.match(paswd))
{
alert('Correct, try another...')
return true;
}
else
{
alert('Wrong...!')
return false;
}
}
View the example in the browser
To check a password between 8 to 15 characters which contain at least one lowercase letter, one uppercase letter, one numeric digit, and one special character
To validate the said format we use the regular expression ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$. Next the match() method of string object is used to match the said regular expression against the input value. Here is the complete web document.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - Password Checking - 4</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Password and Submit [8 to 15 characters which contain at least one lowercase letter, one uppercase letter, one numeric digit, and one special character]</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li class="rq">*Enter numbers only.</li>
<li> </li>
<li><input type="submit" name="submit" value="Submit" onclick="allnumericplusminus(document.form1.text1)" /></li>
<li> </li>
</ul>
</form>
</div>
<script src="check-password-4.js"></script>
</body>
</html>
JavaScript Code:
function CheckPassword(inputtxt)
{
var decimal= /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
if(inputtxt.value.match(decimal))
{
alert('Correct, try another...')
return true;
}
else
{
alert('Wrong...!')
return false;
}
}
View the example in the browser

Previous: JavaScript: HTML Form - Credit Card Number validation
Next: JavaScript: HTML Form - IP address validation
Test your Programming skills with w3resource's quiz.
JavaScript: Tips of the Day
Returns 1 if the array is sorted in ascending order, -1 if it is sorted in descending order or 0 if it is not sorted
Example:
const tips_Sorted = arr => { let direction = -(arr[0] - arr[1]); for (let [i, val] of arr.entries()) { direction = !direction ? -(arr[i - 1] - arr[i]) : direction; if (i === arr.length - 1) return !direction ? 0 : direction / Math.abs(direction); else if ((val - arr[i + 1]) * direction > 0) return 0; } }; console.log(tips_Sorted([0, 1, 2, 2])); console.log(tips_Sorted([5, 7, 3])); console.log(tips_Sorted([8, 6, 4]));
Output:
1 0 -1
- Weekly Trends
- Java Basic Programming Exercises
- SQL Subqueries
- Adventureworks Database Exercises
- C# Sharp Basic Exercises
- SQL COUNT() with distinct
- JavaScript String Exercises
- JavaScript HTML Form Validation
- Java Collection Exercises
- SQL COUNT() function
- SQL Inner Join
- JavaScript functions Exercises
- Python Tutorial
- Python Array Exercises
- SQL Cross Join
- C# Sharp Array Exercises
We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook