JavaScript Regular Expressions
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
javascript
const digitsOnly = /^\d+$/;
console.log(digitsOnly.test("12345"));
console.log(digitsOnly.test("123a"));The output is true then false.
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
javascript
/^pattern$/.test(value);Both anchors, every time.
A common check for codes and reference numbers.
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.
Curly braces give an exact length.
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.
? makes a section optional.
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.
A fully correct email pattern is enormous and still not reliable.
A loose check plus a confirmation email is the practical answer.
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.
A pattern checks the shape; other code checks the meaning.
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
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>Run the above example in the Try It Editor.
Try lowercase:
Enter abc123 and see the code check fail.
{n} enforces an exact length.? makes a part optional.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.