JavaScript Regular expression validation
JavaScript Validate the value by regular expression
function validateUsername(username) {
var regex = /^[a-z][a-z0-9_]{4,20}$/gi;
return regex.test(username);
}
<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>
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);
}
<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>
function validateDate(date) {
// date format 2021-12-31 yyyy-mm-dd
// var regex = /^([1-9]\d{3})-(0[1-9]|1[012])-(0[1-9]|[12]\d|3[01])$/gi;
// date format 31-12-2021 dd-mm-yyy
var regex = /^(0[1-9]|[12]\d|3[01])-(0[1-9]|1[012])-([1-9]\d{3})$/gi;
return regex.test(date);
}
<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>
4
Strong password validation
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>
function validateURL(url) {
//URL starting with http://, https://, or www.
var regex = /^((https?:\/\/(www\.)?|www\.)[a-zA-Z0-9][\w+\d+&@\-#\/%?=~_|!:,.;+]*)$/gi;
return regex.test(url);
}
<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>
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) {
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';
event.preventDefault();
return false;
}
if (!validateEmail(email)) {
email_valid_label.innerText = 'Invalid Email Address';
event.preventDefault();
return false;
}
// ajax()
// ...........
// event.preventDefault();
});
</script>