JavaScript Regular expression validation
Validate the form input value with JavaScript regular expression RegEx. Username, strong password, email address, and mobile number regex validation functions
Regex Username Validation
Regex Email Address Validation
Regex Date Validation
Regex Strong password validation
Regex URL link validation
Regex Mobile Number validation
Demo
starting with [a-z] and [a-z0-9_] letters only. min-max 5-20
<label for="username">username</label>
<div>
<input id="username" class="input-text" type="text">
<span id="username-valid-label" style="display: block;color: red"></span>
</div>
<script>
document.getElementById("username").addEventListener("change", function() {
var username = this.value;
var result = validateUsername(username);
var label = document.getElementById("username-valid-label");
if (result) {
label.innerText = '';
} else {
label.innerText = 'Invalid string. only [a-z0-9_] min-max 5-20';
}
});
</script>
Demo
<label for="email">Email</label>
<div>
<input id="email" class="input-text" type="text">
<span id="email-valid-label" style="display: block;color: red"></span>
</div>
<script>
document.getElementById("email").addEventListener("change", function() {
var email = this.value;
var result = validateEmail(email);
var label = document.getElementById("email-valid-label");
if (result) {
label.innerText = '';
} else {
label.innerText = 'Invalid Email Address';
}
});
</script>
Demo
<label for="date">Date</label>
<div>
<input id="date" class="input-text" type="text">
<span id="date-valid-label" style="display: block;color: red"></span>
</div>
<script>
document.getElementById("date").addEventListener("change", function () {
var date = this.value;
var result = validateDate(date);
var label = document.getElementById("date-valid-label");
if (result) {
label.innerText = '';
} else {
label.innerText = 'Invalid Date [dd-mm-yyy]';
}
});
</script>
Demo
Minimum 8 chars
At least-one small letter [a-z]
At least-one upper letter [A-Z]
At least-one digit [0-9]
At least-one special char [~!@#$%^&*(...)]
function validatePassword(password) {
if (typeof password != "string") {
password = "" + password;
}
if (password.length < 8) {
return 'Password length must be 8 chars';
}
if (password.search(/[0-9]/) === -1) {
return 'At least 1 numeric value';
}
if (password.search(/[a-z]/) === -1) {
return 'At least 1 small letter value [a-z]';
}
if (password.search(/[A-Z]/) === -1) {
return 'At least 1 upper letter value [A-Z]';
}
if (password.search(/[`~!@#\$%\^&\*\(\)\-_\{\}\=\+'"\>\.\,\?<\/\|\\\:;\]\[]/) === -1) {
return 'At least 1 special chars [~!@#$%^&*()_+{}":?><...]';
}
return true;
}
<label for="password">Password</label>
<div>
<input id="password" class="input-text" type="text">
<span id="pass-valid-label" style="display: block;color: red"></span>
</div>
<script>
document.getElementById("password").addEventListener("change", function () {
var password = this.value;
var result = validatePassword(password);
var label = document.getElementById("pass-valid-label");
if (result == true) {
label.innerText = '';
} else {
label.innerText = result;
}
});
</script>
Demo
URL starting with http://, https://, or www.
<label for="url">URL</label>
<div>
<input id="url" class="input-text" type="text">
<span id="url-valid-label" style="display: block;color: red"></span>
</div>
<script>
document.getElementById("url").addEventListener("change", function () {
var url = this.value;
var result = validateURL(url);
var label = document.getElementById("url-valid-label");
if (result == true) {
label.innerText = '';
} else {
label.innerText = 'Invalid URL';
}
});
</script>
Demo
function validateMobile(number) {
// use this regex if only 10 numbers
// var regex = /^\d{10}$/g;
// supported number formats
// (123) 456-7890
// 123-456-7890
// 123.456.7890
// 1234567890
var regex = /^\(?([0-9]{3})\)?[\-\.\s]?([0-9]{3})[\-\.\s]?([0-9]{4})$/g;
return regex.test(number);
}
<label for="mobile">Mobile</label>
<div>
<input id="mobile" class="input-text" type="text">
<span id="mobile-valid-label" style="display: block;color: red"></span>
</div>
<script>
document.getElementById("mobile").addEventListener("change", function () {
var mobile = this.value;
var result = validateMobile(mobile);
var label = document.getElementById("mobile-valid-label");
if (result == true) {
label.innerText = '';
} else {
label.innerText = 'Invalid mobile number';
}
});
</script>
Form Validation
<form id="demo-form" action="">
<label for="username">username</label>
<div>
<input id="username" class="input-text" type="text">
<span id="username-valid-label" style="display: block;color: red"></span>
</div>
<label for="email">email</label>
<div>
<input id="email" class="input-text" type="text">
<span id="email-valid-label" style="display: block;color: red"></span>
</div>
<br>
<input type="submit" value="submit">
</form>
<script>
function validateUsername(username) {
var regex = /^[a-z][a-z0-9_]{4,20}$/gi;
return regex.test(username);
}
function validateEmail(email) {
var regex = /^([a-z0-9!#$%&'*+\-/=?^_`{|}~]+(?:\.[a-zA-Z0-9!#$%&'*+\-/=?^_`{|}~]+)*)@((?:[a-z0-9]+(?:[a-z-0-9-]*)\.)+[a-z]{2,})$/gi;
return regex.test(email);
}
document.getElementById("demo-form").addEventListener("submit", function (event) {
event.preventDefault();
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var email_valid_label = document.getElementById("email-valid-label");
var username_valid_label = document.getElementById("username-valid-label");
username_valid_label.innerText = '';
email_valid_label.innerText = '';
if (!validateUsername(username)) {
username_valid_label.innerText = 'Invalid string. only [a-z0-9_] min-max 5-20';
return false;
}
if (!validateEmail(email)) {
email_valid_label.innerText = 'Invalid Email Address';
return false;
}
// jquery ajax post
$.ajax({
url: 'https://your-domain.com/contact.php',
data: {
username: username,
email: email
},
dataType: 'json',
method: 'POST',
success: function(){
alert("success");
},
error: function(xhr){
alert("error "+xhr.status+' '+xhr.statusText)
}
});
});
</script>