JavaScript Regular Expressions
JavaScript Regex Validation
Regular expressions are commonly used to check the shape of input.
Validation patterns must be anchored at both ends.
And they should always be backed up by checks on the server.
Example
Example
javascript
const digitsOnly = /^\d+$/;
console.log(digitsOnly.test("12345"));
console.log(digitsOnly.test("123a"));The output is true then false.
Rules for Validation Patterns
Anchor with ^ and $ so the whole value must match.
Be no stricter than the real rule requires.
Never rely on it as your only check.
Syntax
Syntax
javascript
/^pattern$/.test(value);Both anchors, every time.
Digits Only
A common check for codes and reference numbers.
Example
Example
javascript
const pattern = /^\d+$/;
console.log(pattern.test("42"));
console.log(pattern.test(""));
console.log(pattern.test("4 2"));An empty string fails because + needs at least one.
A Fixed Length Code
Curly braces give an exact length.
Example
Example
javascript
const pattern = /^[A-Z]{3}\d{3}$/;
console.log(pattern.test("ABC123"));
console.log(pattern.test("AB123"));
console.log(pattern.test("abc123"));The last fails because the pattern requires capitals.
Optional Parts
? makes a section optional.
Example
Example
javascript
const pattern = /^\+?\d{10,12}$/;
console.log(pattern.test("07123456789"));
console.log(pattern.test("+447123456789"));
console.log(pattern.test("07123"));The plus is allowed but not required.
Email Patterns Are a Trap
A fully correct email pattern is enormous and still not reliable.
A loose check plus a confirmation email is the practical answer.
Example
Example
javascript
const loose = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
console.log(loose.test("ada@example.com"));
console.log(loose.test("not an email"));
console.log(loose.test("a@b.c"));The last is technically valid, which shows the limits of pattern checking.
Combining with Other Checks
A pattern checks the shape; other code checks the meaning.
Example
Example
javascript
function validYear(value) {
if (!/^\d{4}$/.test(value)) return "wrong shape";
const year = Number(value);
if (year < 1900 || year > 2100) return "out of range";
return "valid";
}
console.log(validYear("20a6"));
console.log(validYear("1500"));
console.log(validYear("2026"));A pattern cannot express a numeric range sensibly.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Regex Validation</title>
</head>
<body>
<h1>Regex Validation</h1>
<input id="value" value="ABC123">
<p id="out"></p>
<script>
const value = document.getElementById("value").value;
const code = /^[A-Z]{3}\d{3}$/;
const digits = /^\d+$/;
document.getElementById("out").innerHTML =
"Value: " + value +
"<br>Valid code: " + code.test(value) +
"<br>Digits only: " + digits.test(value);
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try lowercase:
Enter abc123 and see the code check fail.
Important Points
- Always anchor validation patterns at both ends.
{n}enforces an exact length.?makes a part optional.- A perfect email pattern is not achievable.
- Combine patterns with ordinary checks for ranges.
Conclusion
Validation is where most people meet regular expressions first.
The anchors are what make the difference between checking and pretending to check.
Browser validation is a convenience, never a security measure.