Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Password pattern property
The HTML DOM Input Password pattern property is used for setting or returning the pattern attribute of an input password field. It validates the password against a regular expression specified by the pattern property to ensure the input meets specific format requirements.
Syntax
Following is the syntax for setting the pattern property −
passwordObject.pattern = regexp
Following is the syntax for returning the pattern property −
passwordObject.pattern
Parameters
regexp − A string containing a regular expression that the password input value must match. If the input doesn't match the pattern, the browser displays a validation message using the title attribute text.
Return Value
The pattern property returns a string representing the regular expression pattern, or an empty string if no pattern is set.
Example − Getting and Setting Pattern Property
Following example demonstrates how to get and set the pattern property of a password input field −
<!DOCTYPE html>
<html>
<head>
<title>Password Pattern Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Input Password Pattern Property</h1>
<p>The password can be either 3 numeric characters or 6 alphabet characters from a to g</p>
<form action="/Sample_page.php">
Password: <input type="password" id="PASS" name="passW"
pattern="[0-9]{3}|[a-g]{6}"
title="Three numeric characters or 6 alphabets between a-g">
<input type="submit" value="Submit">
</form>
<br>
<button onclick="getPattern()">GET PATTERN</button>
<button onclick="setNewPattern()">SET NEW PATTERN</button>
<button onclick="clearPattern()">CLEAR PATTERN</button>
<p id="result"></p>
<script>
function getPattern() {
var passwordField = document.getElementById("PASS");
var pattern = passwordField.pattern;
document.getElementById("result").innerHTML =
"Current pattern: " + (pattern || "No pattern set");
}
function setNewPattern() {
var passwordField = document.getElementById("PASS");
passwordField.pattern = "[A-Z]{2}[0-9]{4}";
passwordField.title = "Two uppercase letters followed by four digits";
document.getElementById("result").innerHTML =
"New pattern set: [A-Z]{2}[0-9]{4}";
}
function clearPattern() {
var passwordField = document.getElementById("PASS");
passwordField.pattern = "";
passwordField.title = "";
document.getElementById("result").innerHTML = "Pattern cleared";
}
</script>
</body>
</html>
The output shows the password field with pattern validation. Clicking "GET PATTERN" displays the current regex, "SET NEW PATTERN" changes it to require 2 uppercase letters + 4 digits, and "CLEAR PATTERN" removes validation −
Input Password Pattern Property
The password can be either 3 numeric characters or 6 alphabet characters from a to g
Password: [????????] [Submit]
[GET PATTERN] [SET NEW PATTERN] [CLEAR PATTERN]
Current pattern: [0-9]{3}|[a-g]{6}
Example − Pattern Validation in Action
Following example shows how pattern validation works when the user submits invalid input −
<!DOCTYPE html>
<html>
<head>
<title>Password Pattern Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Password Pattern Validation Demo</h2>
<form id="passwordForm">
<label for="userPassword">Enter Password:</label>
<input type="password" id="userPassword" name="password"
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}"
title="At least 8 characters with uppercase, lowercase and number"
required>
<input type="submit" value="Validate">
</form>
<div id="validation-info">
<p><strong>Password Requirements:</strong></p>
<ul>
<li>At least 8 characters long</li>
<li>Contains at least one lowercase letter</li>
<li>Contains at least one uppercase letter</li>
<li>Contains at least one digit</li>
</ul>
</div>
<p id="status"></p>
<script>
document.getElementById("passwordForm").addEventListener("submit", function(e) {
e.preventDefault();
var passwordField = document.getElementById("userPassword");
var isValid = passwordField.checkValidity();
if (isValid) {
document.getElementById("status").innerHTML =
"<span style='color: green;'>? Password is valid!</span>";
} else {
document.getElementById("status").innerHTML =
"<span style='color: red;'>? Password does not meet requirements</span>";
}
});
</script>
</body>
</html>
This example uses a more complex pattern that requires a strong password. The form validates on submit and shows whether the password meets the pattern requirements.
Common Pattern Examples
Following table shows common regex patterns used for password validation −
| Pattern | Description |
|---|---|
[0-9]{6} |
Exactly 6 digits (e.g., 123456) |
[a-zA-Z]{8,} |
At least 8 letters (upper or lowercase) |
(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,} |
At least 8 characters with lowercase, uppercase, and digit |
[a-zA-Z0-9!@#$%^&*]{6,12} |
6-12 characters including letters, numbers, and special characters |
^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$ |
Strong password: 8+ chars with upper, lower, digit, and special character |
Browser Compatibility
The pattern property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. However, older browsers may not enforce pattern validation, so server-side validation should always be implemented as a backup.
Key Points
-
The pattern property only works with
input type="password"and other text-based input types. -
Pattern validation occurs only when the form is submitted, not on every keystroke.
-
The title attribute should always be used to provide user-friendly validation messages.
-
Use the
checkValidity()method to programmatically check if the input matches the pattern. -
Regular expressions in the pattern attribute should not include the forward slash delimiters (
/).
Conclusion
The HTML DOM Input Password pattern property provides client-side password validation using regular expressions. It helps enforce password format requirements and improves user experience by providing immediate feedback. Always combine pattern validation with server-side validation for complete security.
484 Views
