验证表单javascript
这是我在这里的第一篇文章，我希望你能帮助我。提前感谢：） 基本上，我正在尝试创建一个验证表单，但由于某些原因，它根本不起作用，代码如下：验证表单javascript,javascript,forms,Javascript,Forms,这是我在这里的第一篇文章，我希望你能帮助我。提前感谢：） 基本上，我正在尝试创建一个验证表单，但由于某些原因，它根本不起作用，代码如下： html:<!DOCTYPE HTML> <html lang="en"> <head> <title>Application form</title> <meta charset="UTF-8"> <meta n
html:<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Application form</title>
<meta charset="UTF-8">
<meta name="description" content="Form">
<meta name="keywords" content="Name, number, email, details...">
<link rel="stylesheet" href="validation.css" type="text/css">
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h3>London Flight Agency</h3>
<form name="myForm" action="" onsubmit="return validateForm()" method="post">
<fieldset>
<legend>Personal Details</legend>
<select id="title">
<option value="Title">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
<br>
<table>
<tr>
<td><label for="name"><p>First Name:<sup>*</sup></p></label></td>
<td><input type="text" name="name" id="name" onblur="validateName(name)"/></td>
<p id="nameError" style="display: none;">You can only use letters!</p>
</tr>
<tr>
<td><label for="lname"><p>Last Name:<sup>*</sup></p></label></td>
<td><input type="text" name="lname" id="lname" onblur="validatelName(lname)"/></td>
<p id="lnameError" style="display: none;">You can only use letters!</p>
</tr>
<tr>
<td><label for="date"><p>Date of birth:<sup>*</sup></p></label></td>
<td><input type="text" name="date" id="date" onblur="validateDate(date)"/></td>
<p id="dateError" style="display: none;">You must enter date of birth!</p>
</tr>
<tr>
<td><label for="tel"><p>Contact tel:<sup>*</sup></p></label></td>
<td><input type="text" name="tel" id="tel" onblur="validateTel(tel)"/></td>
<p id="telError" style="display: none;">Enter a valid telephone number!</p>
</tr>
<tr>
<td><label for="email"><p>Email Adress:<sup>*</sup></p></label></td>
<td><input type="text" name="email" id="email" onblur="validateEmail(email)"/></td>
<p id="emailError" style="display: none;">You must enter a valid email address</p>
</tr>
<tr>
<td><label for="pcode"><p>Postcode:<sup>*</sup></p></label></td>
<td><input type="text" name="pcode" id="pcode" onblur="validatePcode(pcode)"/></td>
<p id="pcodeError" style="display: none;">You must enter a valid postcode</p>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Flight Details</legend>
<label for="luggage"><p>Hand luggage:<sup>*</sup></p></label>
<input type="radio" name="luggage" value="Yes" id="yes" />
<label for="yes">Yes</label>
<input type="radio" name="luggage" id="no" value="no" />
<label for="no">No</label><br><br>
<table>
<tr>
<td><label for="height">Height:</label></td>
<td><input id="height" type="text" name="height"/></td>
<td><label for="height">Units:</label></td>
<td><select id="height" name="height">
<option>inches</option>
<option>centimeters</option>
</select></td>
</tr>
<br>
<tr>
<td><label for="weight">Weight:</label></td>
<td><input id="weight" type="text" name="weight"/></td>
<td><label for="weight">Units:</label></td>
<td><select id="weight" name="weight">
<option>pounds</option>
<option>kilograms</option>
</select></td>
</tr>
</table>
<br>
<label for='extrabag'>Include extra bag(£25)</label>
<input type="checkbox" id="includebag"name="extrabag" onclick="calculateTotal()"/>
<br><br>
<label for='insurance'>Include insurance(£15)</label>
<input type="checkbox" id="Insurance"name="insurance" onclick="calculateTotal()"/>
<br><br>
<label for='assistance'>Special assistance(£30)</label>
<input type="checkbox" id="Assistance"name="assistance" onclick="calculateTotal()"/>
<br><br>
<select id="Payment">
<option value="payment">Payment card</option>
<option value="Visa">Visa Debit Card</option>
<option value="MasterCard">MasterCard</option>
<option value="Fudge">PayPal</option>
<option value="Mocha">Mestro</option>
<option value="Raspberry">Visa Electron</option>
</select>
<br><br>
<input type="submit" value="Total" />
<input type="reset" value="Reset form" />
</fieldset>
</form>
</body>
javascript:
function validateName(name){
var re = /[A-Za-z -']$/;
if(re.test(document.getElementById(name).value)){
document.getElementById(name).style.background ='#ccffcc';
document.getElementById(name + 'Error').style.display = "none";
return true;
}
else{
document.getElementById(name).style.background ='#e35152';
document.getElementById(name + 'Error').style.display = "block";
return false;
}
}
function validatelName(lname){
var re = /[A-Za-z -']$/;
if(re.test(document.getElementById(lname).value)){
document.getElementById(lname).style.background ='#ccffcc';
document.getElementById(lname + 'Error').style.display = "none";
return true;
}else{
document.getElementById(lname).style.background ='#e35152';
document.getElementById(lname + 'Error').style.display = "block";
return false;
}
}
function validateDate(date){
var re = ^\d{1,2}\/\d{1,2}\/\d{4}$;
if(re.test(document.getElementById(date).value)){
document.getElementById(date).style.background ='#ccffcc';
document.getElementById(date + 'Error').style.display = "none";
return true;
}
else{
document.getElementById(date).style.background ='#e35152';
document.getElementById(date + 'Error').style.display = "block";
return false;
}
}
function validateNum(tel){
var re = /^[0-9]+$/;
if(re.test(document.getElementById(tel).value)){
document.getElementById(tel).style.background ='#ccffcc';
document.getElementById(tel + 'Error').style.display = "none";
return true;
}else{
document.getElementById(tel).style.background ='#e35152';
document.getElementById(tel + 'Error').style.display = "block";
return false;
}
}
function validateEmail(email){
var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(re.test(email)){
document.getElementById('email').style.background ='#ccffcc';
document.getElementById('emailError').style.display = "none";
return true;
}else{
document.getElementById('email').style.background ='#e35152';
return false;
}
}
function validateForm(){
// Set error catcher
var error = 0;
// Check name
if(!validateName('name')){
document.getElementById('nameError').style.display = "block";
error++;
}
if(!validatelName('lname')){
document.getElementById('lnameError').style.display = "block";
error++;
}
if(!validateNum('tel')){
document.getElementById('telError').style.display = "block";
error++;
}
if(!validateDate('date')){
document.getElementById('dateError').style.display = "block";
error++;
}
// Validate email
if(!validateEmail(document.getElementById('email').value)){
document.getElementById('emailError').style.display = "block";
error++;
}
if(error > 0){
return false;
}
}
html：
申请表
伦敦航空公司
个人资料
标题
先生
夫人
错过
博士
名字：*
您只能使用字母
姓氏：*
您只能使用字母
出生日期：*
您必须输入出生日期
联络电话:*
输入有效的电话号码
电子邮件地址：*
必须输入有效的电子邮件地址
邮政编码：*
必须输入有效的邮政编码
航班详情
手提行李：*
对
否
高度：
单位：
英寸
厘米
重量：
单位：
英镑
公斤
包括额外的行李（25英镑）
包括保险费（15英镑）
特别援助（30英镑）
支付卡
支票卡
万事达卡
贝宝
梅斯特罗
维萨电子
javascript:
函数validateName（名称）{
var re=/[A-Za-z-']$/；
if（重新测试（document.getElementById（name.value））{
document.getElementById（name.style.background='#ccffcc'；
document.getElementById（名称+‘错误’）.style.display=“无”；
返回true；
}
否则{
document.getElementById（名称）.style.background='#e3552'；
document.getElementById（名称+‘错误’）.style.display=“块”；
返回false；
}
}
函数validatelName（lname）{
var re=/[A-Za-z-']$/；
if（重新测试（document.getElementById（lname.value））{
document.getElementById（lname）.style.background='#ccffcc'；
document.getElementById（lname+'Error'）.style.display=“无”；
返回true；
}否则{
document.getElementById（lname）.style.background='#e3552'；
document.getElementById（lname+'Error'）.style.display=“block”；
返回false；
}
}
功能验证日期（日期）{
var re=^\d{1,2}\/\d{1,2}\/\d{4}$；
if（重新测试（document.getElementById（date.value））{
document.getElementById（date.style.background='#ccffcc'；
document.getElementById（日期+‘错误’）.style.display=“无”；
返回true；
}
否则{
document.getElementById（date.style.background='#e3552'；
document.getElementById（日期+'Error'）.style.display=“block”；
返回false；
}
}
函数验证枚举（tel）{