Form input validation using regular expressions
HTML
<form><label for="testInput">Enter something:</label>
<input type="text" id="testInput" name="input" value="" />
<ul>
<li>is Numeric? <span id="isNumeric"></span></li>
<li>is Monetary? <span id="isMonetary"></span></li>
<li>is Alpha? <span id="isAlpha"></span></li>
<li>is Alpha w/ spaces? <span id="isAlphaSpace"></span></li>
<li>is Alphanumeric? <span id="isAlphaNum"></span></li>
<li>is words? <span id="isWords"></span></li>
<li>is Email? <span id="isEmail"></span></li>
<li>is Phone? <span id="isPhone"></span></li>
</ul>
</form>
CSS
span{
color: #00CC00;
font-weight: bold;
}
JavaScript
var onDoneInput = function(e) {
var value = e.currentTarget.value;
var numRegex = /^[0-9]\d{0,2}$/;
if (numRegex.test(value)) {
isNumeric.html('true');
} else {
isNumeric.html('');
}
// allows 100,000,000.00
var moneyRegex = /^[-+]?[0-9]*(,[0-9]{3})*(\.[0-9]{1,2})?$/;
if (moneyRegex.test(value)) {
isMonetary.html('true');
} else {
isMonetary.html('');
}
var alphaRegex = /^[a-zA-Z]+$/;
if (alphaRegex.test(value)) {
isAlpha.html('true');
} else {
isAlpha.html('');
}
var alphaSpaceRegex = /^[a-zA-Z\s]+$/;
if (alphaSpaceRegex.test(value)) {
isAlphaSpace.html('true');
} else {
isAlphaSpace.html('');
}
var alphaNumRegex = /^[0-9a-zA-Z]+$/;
if (alphaNumRegex.test(value)) {
isAlphaNum.html('true');
} else {
isAlphaNum.html('');
}
var wordRegex = /^[\w]+$/;
if (wordRegex.test(value)) {
isWords.html('true');
} else {
isWords.html('');
}
var emailRegex = /\S+@\S+\.\S+/;
if (emailRegex.test(value)) {
isEmail.html('true');
} else {
isEmail.html('');
}
// allows 1234567, 123-4567, 123-456-7890, (123) 456-7890
var phoneRegex = /^((([0-9]{3}|\([0-9]{3}\))[-\ ]?)?[0-9]{3}[-\ ]?[0-9]{4})$/;
if (phoneRegex.test(value)) {
isPhone.html('true');
} else {
isPhone.html('');
}
};
var output = $('#output');
var userInput = $('input#testInput');
var isNumeric = $('#isNumeric');
var isMonetary = $('#isMonetary');
var isAlpha = $('#isAlpha');
var isAlphaSpace = $('#isAlphaSpace');
var isAlphaNum = $('#isAlphaNum');
var isWords = $('#isWords');
var isEmail = $('#isEmail');
var isPhone = $('#isPhone');
userInput.bind('keyup', onDoneInput);