Javascript+HTML用正则表达式写一段输入的验证代码
高分求大神写一段HTML关于用户输入信息的验证，包含一段Javascript的正则表达式验证。
要求：
验证姓名first name和lastname不能字母不能为空白；
验证家庭住址（多行的输入）文本输入部分不能为空白；
验证e-mail（必须为严格的e-mail验证）
电话号码验证（只能为数字和单个空格存在）可以允许有+（）存在；
货运方式（单选按钮）三个radio button分别为regular post（默认选项）, courier, express courier；
信用卡号码验证，13-18位之间的数字，允许有单个空格；
信用卡有效期限验证，下拉菜单包括年份，月份（不能为过期）；
最后有一个checkbox复选框 上面标明"please sign me up for the newsletter"
（具体英文要求如图）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Javascript+HTML用正则表达式写一段输入的验证代码</title>
<style type="text/css">
table {
position: relative;
margin: auto;
font-family: Consolas;
font-size: 12px;
border: 1px solid black;
border-collapse: collapse;
width: 800px;
}
table tr td {
border: 1px solid black;
}
.center {
text-align: center;
}
</style>
<script type="text/javascript">
var V = {
isError: true,
validationType: [
'cannot be blank',
'must be a valid email',
'must contain only numbers,single spaces.',
'must contain between 13 & 18 numbers, and single spaces.',
'expiry date cannot be expired.'
],
trim: function(v)
{
return v.replace(/^\s*|\s*$/g, '');
},
validateOnblur: function(obj, validationType)
{
var val = V.trim(obj.value);
switch (validationType)
{
case 0:
if (V.trim(obj.value) == '')
{
obj.value = '';
return V.validationType[0];
}
return '';
case 1:
if (!/^[\w\-]+@[\w\-]+\.\w+$/.test(val))
{
obj.value = '';
return V.validationType[1];
}
return '';
case 2:
if (!/^(\+\(\d+\))?\d+$/.test(val))
{
obj.value = '';
return V.validationType[2];
}
return '';
case 3:
if (!/^[\d\s]{13,18}$/.test(val))
{
obj.value = '';
return V.validationType[3];
}
return '';
case 4:
var expirydate = document.getElementsByName('expirydate');
var year = expirydate[0].value;
var month = expirydate[1].value;
if (new Date(year, month, 0) >= new Date())
{
obj.value = '';
return V.validationType[4];
}
return '';
default:
return '';
}
},
checkNow: function(obj)
{
var _name = obj.name, validationType = -1;
if (_name == 'firstname' || _name == 'lastname' || _name == 'address')
{
validationType = 0;
}
else if (_name == 'email')
{
validationType = 1;
}
else if (_name == 'phone')
{
validationType = 2;
}
else if (_name == 'credit')
{
validationType = 3;
}
else if (_name == 'expirydate')
{
validationType = 4;
}
var cell = obj.parentElement;
if (cell.children[cell.children.length - 1].tagName.toLowerCase() == 'div')
{
cell.removeChild(cell.children[cell.children.length - 1]);
V.isError = false;
}
var error = V.validateOnblur(obj, validationType);
if (error != '')
{
var info = document.createElement('div');
info.style.color = 'red';
info.innerText = error;
cell.appendChild(info);
V.isError = true;
}
},
displayError: function(rows, len, flag)
{
for ( var i = 0; i < len; i++)
{
var cell = rows[i].cells[1];
if (!cell)
{
continue;
}
var obj = cell.children[0];
if (flag)
{
if (typeof obj.value != 'undefined')
{
V.checkNow(obj);
}
}
else
{
obj.onblur = function()
{
var obj = this;
V.checkNow(obj);
}
}
}
}
};
window.onload = function ()
{
var form = document.formValidation;
var table = form.getElementsByTagName('table')[0];
var rows = table.rows, len = rows.length;
document.getElementById('submit').onclick = function()
{
V.displayError(rows, len, true);
}
form.onsubmit = function()
{
return !V.isError;
}
V.displayError(rows, len, false);
var expirydate = document.getElementsByName('expirydate');
for ( var i = 2014; i < 2055; i++)
{
var option = document.createElement('option');
option.value = i;
option.innerText = i;
expirydate[0].appendChild(option);
}
for ( var i = 1; i < 13; i++)
{
var option = document.createElement('option');
option.value = i;
option.innerText = String(i).length < 2 ? '0' + i : i;
expirydate[1].appendChild(option);
}
}
</script>
</head>
<body>
<form name="formValidation" method="post" action="">
<table>
<caption>!Form Validation!</caption>
<tr>
<td>first name:</td>
<td><input type="text" name="firstname" /></td>
</tr>
<tr>
<td>last name:</td>
<td><input type="text" name="lastname" /></td>
</tr>
<tr>
<td>address:</td>
<td><textarea name="address"></textarea></td>
</tr>
<tr>
<td>email:</td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td>phone:</td>
<td><input type="text" name="phone" /></td>
</tr>
<tr>
<td>delivery method:</td>
<td>
<label><input type="radio" name="delivery" checked="checked" />regular post</label>
<label><input type="radio" name="delivery" />courier</label>
<label><input type="radio" name="delivery" />express courier</label>
</td>
</tr>
<tr>
<td>credit card number field: </td>
<td><input type="text" name="credit" /></td>
</tr>
<tr>
<td>expiry date:</td>
<td>
<select name="expirydate"></select> year
<select name="expirydate"></select> month
</td>
</tr>
<tr>
<td class="center" colspan="2">
<label><input type="checkbox" name="newletter" />please sign me up for the newletter</label>
</td>
</tr>
<tr>
<td class="center" colspan="2">
<input type="submit" value="submit" id="submit" /><input type="reset" value="reset" />
</td>
</table>
</form>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>Javascript+HTML用正则表达式写一段输入的验证代码</title>
<style type="text/css">
table {
position: relative;
margin: auto;
font-family: Consolas;
font-size: 12px;
border: 1px solid black;
border-collapse: collapse;
width: 800px;
}
table tr td {
border: 1px solid black;
}
.center {
text-align: center;
}
</style>
<script type="text/javascript">
var V = {
isError: true,
validationType: [
'cannot be blank',
'must be a valid email',
'must contain only numbers,single spaces.',
'must contain between 13 & 18 numbers, and single spaces.',
'expiry date cannot be expired.'
],
trim: function(v)
{
return v.replace(/^\s*|\s*$/g, '');
},
validateOnblur: function(obj, validationType)
{
var val = V.trim(obj.value);
switch (validationType)
{
case 0:
if (V.trim(obj.value) == '')
{
obj.value = '';
return V.validationType[0];
}
return '';
case 1:
if (!/^[\w\-]+@[\w\-]+\.\w+$/.test(val))
{
obj.value = '';
return V.validationType[1];
}
return '';
case 2:
if (!/^(\+\(\d+\))?\d+$/.test(val))
{
obj.value = '';
return V.validationType[2];
}
return '';
case 3:
if (!/^[\d\s]{13,18}$/.test(val))
{
obj.value = '';
return V.validationType[3];
}
return '';
case 4:
var expirydate = document.getElementsByName('expirydate');
var year = expirydate[0].value;
var month = expirydate[1].value;
if (new Date(year, month, 0) >= new Date())
{
obj.value = '';
return V.validationType[4];
}
return '';
default:
return '';
}
},
checkNow: function(obj)
{
var _name = obj.name, validationType = -1;
if (_name == 'firstname' || _name == 'lastname' || _name == 'address')
{
validationType = 0;
}
else if (_name == 'email')
{
validationType = 1;
}
else if (_name == 'phone')
{
validationType = 2;
}
else if (_name == 'credit')
{
validationType = 3;
}
else if (_name == 'expirydate')
{
validationType = 4;
}
var cell = obj.parentElement;
if (cell.children[cell.children.length - 1].tagName.toLowerCase() == 'div')
{
cell.removeChild(cell.children[cell.children.length - 1]);
V.isError = false;
}
var error = V.validateOnblur(obj, validationType);
if (error != '')
{
var info = document.createElement('div');
info.style.color = 'red';
info.innerText = error;
cell.appendChild(info);
V.isError = true;
}
},
displayError: function(rows, len, flag)
{
for ( var i = 0; i < len; i++)
{
var cell = rows[i].cells[1];
if (!cell)
{
continue;
}
var obj = cell.children[0];
if (flag)
{
if (typeof obj.value != 'undefined')
{
V.checkNow(obj);
}
}
else
{
obj.onblur = function()
{
var obj = this;
V.checkNow(obj);
}
}
}
}
};
window.onload = function ()
{
var form = document.formValidation;
var table = form.getElementsByTagName('table')[0];
var rows = table.rows, len = rows.length;
document.getElementById('submit').onclick = function()
{
V.displayError(rows, len, true);
}
form.onsubmit = function()
{
return !V.isError;
}
V.displayError(rows, len, false);
var expirydate = document.getElementsByName('expirydate');
for ( var i = 2014; i < 2055; i++)
{
var option = document.createElement('option');
option.value = i;
option.innerText = i;
expirydate[0].appendChild(option);
}
for ( var i = 1; i < 13; i++)
{
var option = document.createElement('option');
option.value = i;
option.innerText = String(i).length < 2 ? '0' + i : i;
expirydate[1].appendChild(option);
}
}
</script>
</head>
<body>
<form name="formValidation" method="post" action="">
<table>
<caption>!Form Validation!</caption>
<tr>
<td>first name:</td>
<td><input type="text" name="firstname" /></td>
</tr>
<tr>
<td>last name:</td>
<td><input type="text" name="lastname" /></td>
</tr>
<tr>
<td>address:</td>
<td><textarea name="address"></textarea></td>
</tr>
<tr>
<td>email:</td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td>phone:</td>
<td><input type="text" name="phone" /></td>
</tr>
<tr>
<td>delivery method:</td>
<td>
<label><input type="radio" name="delivery" checked="checked" />regular post</label>
<label><input type="radio" name="delivery" />courier</label>
<label><input type="radio" name="delivery" />express courier</label>
</td>
</tr>
<tr>
<td>credit card number field: </td>
<td><input type="text" name="credit" /></td>
</tr>
<tr>
<td>expiry date:</td>
<td>
<select name="expirydate"></select> year
<select name="expirydate"></select> month
</td>
</tr>
<tr>
<td class="center" colspan="2">
<label><input type="checkbox" name="newletter" />please sign me up for the newletter</label>
</td>
</tr>
<tr>
<td class="center" colspan="2">
<input type="submit" value="submit" id="submit" /><input type="reset" value="reset" />
</td>
</table>
</form>
</body>
</html>
温馨提示：答案为网友推荐，仅供参考
相似回答