使用javascript验证表格

Question

我不太了解JavaScript，但我需要用它来验证表单上的输入。我看了很多例子，我真的不明白为什么它不起作用。当我点击提交时，什么都没有发生，它只是进入下一页，就像那里甚至没有任何JavaScript。对不起，如果这是一个完全明显的答案，我没有经验的JavaScript，所以我不知道我在找什么。我正在写所有的代码在同一页上。谢谢你的帮助。

的javascript：

<script type="text/javascript"> 
function validateform(theform) { 
var reason = ""; 

reason += validateName(theform.name); 
reason += validateSurname(theform.surname); 
reason += validateEmail(theform.email); 
reason += validateHomephone(theform.homephone); 
reason += validateMobilephone(theform.mobilephone); 
reason += validateAddress(theform.address); 
reason += validateTown(theform.town); 
reason += validateCounty(theform.county); 
reason += validatePostcode(theform.postcode); 
reason += validateEmpty(theform.empty); 


if (reason != "") { 
alert("Some fields need correction:\n" + reason); 
return false; 
} 

alert("All fields are filled correctly"); 
return true; 
} 




function validateEmpty(fld) { 
var error = ""; 

if (fld.value.length == 0) { 
    fld.style.background = 'Yellow'; 
    error = "The required field has not been filled in.\n" 
} else { 
    fld.style.background = 'White'; 
} 
return error; 
} 




function validateName(fld) { 
var error = ""; 
var illegalChars = ^[a-z\s]*$; // allow letters, numbers 

if (fld.value == "") { 
    fld.style.background = 'Yellow'; 
    error = "You didn't enter a name.\n"; 
} else if (illegalChars.test(fld.value)) { 
    fld.style.background = 'Yellow'; 
    error = "The name contains illegal characters.\n"; 
} else { 
    fld.style.background = 'White'; 
} 
return error; 
} 



function validatSurname(fld) { 
var error = ""; 
var illegalChars = ^[a-z\s]*$; // allow letters, numbers 

if (fld.value == "") { 
    fld.style.background = 'Yellow'; 
    error = "You didn't enter a surname.\n"; 
} else if (illegalChars.test(fld.value)) { 
    fld.style.background = 'Yellow'; 
    error = "The surname contains illegal characters.\n"; 
} else { 
    fld.style.background = 'White'; 
} 
return error; 
} 



function validateEmail(fld) { 
var error=""; 
var tfld = trim(fld.value);      // value of field with whitespace trimmed off 
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ; 
var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ; 

if (fld.value == "") { 
    fld.style.background = 'Yellow'; 
    error = "You didn't enter an email address.\n"; 
} else if (!emailFilter.test(tfld)) {    //test email for illegal characters 
    fld.style.background = 'Yellow'; 
    error = "Please enter a valid email address.\n"; 
} else if (fld.value.match(illegalChars)) { 
    fld.style.background = 'Yellow'; 
    error = "The email address contains illegal characters.\n"; 
} else { 
    fld.style.background = 'White'; 
} 
return error; 
} 


function validateHomenumber(fld) { 
var error = ""; 
var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');  

if (fld.value == "") { 
    error = "You didn't enter a phone number.\n"; 
    fld.style.background = 'Yellow'; 
} else if (isNaN(parseInt(stripped))) { 
    error = "The home phone number contains illegal characters.\n"; 
    fld.style.background = 'Yellow'; 
} else if (!(stripped.length == 11)) { 
    error = "The home phone number is the wrong length.\n"; 
    fld.style.background = 'Yellow'; 
} else { 
    fld.style.background = 'White'; 
} 
return error; 
} 

function validateMobilenumber(fld) { 
var error = ""; 
var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');  


if (isNaN(parseInt(stripped))) { 
    error = "The mobile phone number contains illegal characters.\n"; 
    fld.style.background = 'Yellow'; 
} else if (!(stripped.length == 11)) { 
    error = "The mobile phone number is the wrong length.\n"; 
    fld.style.background = 'Yellow'; 
} else { 
    fld.style.background = 'White'; 
} 
return error; 
} 

function validateAddress(fld) { 
var error = ""; 

if (fld.value == "") { 
    error = "You didn't enter a home address.\n"; 
    fld.style.background = 'Yellow'; 

    }else { 
    fld.style.background = 'White'; 
} 
    return error; 
} 

function validateTown(fld) { 
var error = ""; 

if (fld.value == "") { 
    error = "You didn't enter a town or city.\n"; 
    fld.style.background = 'Yellow'; 

    }else { 
    fld.style.background = 'White'; 
} 
    return error; 
} 


function validateCounty(fld) { 
var error = ""; 

if (fld.value == "") { 
    error = "You didn't enter a county.\n"; 
    fld.style.background = 'Yellow'; 

    }else { 
    fld.style.background = 'White'; 
} 
    return error; 
} 

function validatePostcode(fld) { 
var error = "";  
var illegalChars = ^[a-z\s]*$; 
var regPostcode = /^([a-zA-Z]){1}([0-9][0-9]|[0-9]|[a-zA-Z][0-9][a-zA-Z]|[a-zA-Z][0-9][0-9]|[a-zA-Z][0-9]){1}([ ])([0-9][a-zA-z][a-zA-z]){1}$/; 

if (fld.value == "") { 
    error = "You didn't enter a post code.\n"; 
    fld.style.background = 'Yellow'; 
    } 
    else if (illegalChars.test(fld.value)) { 
    fld.style.background = 'Yellow'; 
    error = "The post code contains illegal characters.\n"; 
    else if ((fld.value.length < 7) || (fld.value.length > 8)) { 
    error = "The post code is the wrong length. \n"; 
    fld.style.background = 'Yellow'; 
} else if (regpostcode.test(fld.value)) { 
fld.style.background = 'Yellow'; 
error = "The post code isn't the correct format.\n"; 
} 
} else { 
    fld.style.background = 'White'; 
} 
return error; 
} 


function trim(s) 
{ 
return s.replace(/^\s+|\s+$/, ''); 
} 

和HTML

</script> 
</head> 
<body> 
<table class="formy" border="o" cellpadding="2" cellspacing="5" bgcolor="#F4EC53" align="center"> 
<th colspan="2" align="center">Booking Private Hire</th> 
<form name="firstform" method="post" onsubmit="return validateform(this)" action="secondform.php"> 
<table summary="first form"> 
<tr> 
<td><label for="Name">First name:</label></td> 
<td><input name="Name" size="35" maxlength="50" type="text"></td> 
</tr> 
<tr> 
<td><label for="Surname">Surname:</label></td> 
<td><input name="Surname" size="35" maxlength="25" type="password"></td> 
</tr> 
<tr> 
<td><label for="Email">E-mail address:</label></td> 
<td><input name="Email" size="35" maxlength="30" type="text"></td> 
</tr> 
<tr> 
<td><label for="Homephone">Home phone number:</label></td> 
<td><input name="Homephone" size="35" maxlength="25" type="text"></td> 
</tr> 
<tr> 
<td> 
    <label for="Mobilephone">Mobile phone number:</label></td> 
<td><input name="Mobilephone" size="35" maxlength="50" type="text"></td> 
</tr> 
<tr> 
<td> 
    <label for="Address">Home address:</label></td> 
<td><input name="Address" size="35" maxlength="50" type="text"></td> 
</tr> 
<tr> 
<td> 
    <label for="Town">Town/city:</label></td> 
<td><input name="Town" size="35" maxlength="50" type="text"></td> 
</tr> 
<tr> 
<td> 
    <label for="County">County:</label></td> 
<td><input name="County" size="35" maxlength="50" type="text"></td> 
</tr> 
<tr> 
<td> 
    <label for="Postcode">Post code:</label></td> 
<td><input name="Postcode" size="35" maxlength="50" type="text"></td> 
</tr> 

<td> </td> 
<td><input name="Submit" value="Send" type="submit" ></td> 
<td> </td> 

</table> 
</form> 
</body> 
</html> 

Answer 1

编辑：终于得到了它为我工作的事情是这样的： 你引用不匹配的字段名称字段的实际名称。

reason += validateName(theform.name); 

改为

reason += validateName(theform.Name); 

而且，似乎是在你的JavaScript代码中的错误：

这些线路不解析：

var illegalChars =^[a - z\s] * $; // allow letters, numbers 

validatePostcode（）有一个结构性问题。这个“else if”在它之前没有右括号。

else if ((fld.value.length < 7) || (fld.value.length > 8)) { 

您可能已经去为：

if (fld.value == "") { 
     error = "You didn't enter a post code.\n"; 
     fld.style.background = 'Yellow'; 
    } else if (illegalChars.test(fld.value)) { 
     fld.style.background = 'Yellow'; 
     error = "The post code contains illegal characters.\n"; 
    } else if ((fld.value.length < 7) || (fld.value.length > 8)) { 
     error = "The post code is the wrong length. \n"; 
     fld.style.background = 'Yellow'; 
    } else if (regpostcode.test(fld.value)) { 
     fld.style.background = 'Yellow'; 
     error = "The post code isn't the correct format.\n"; 
    } else { 
     fld.style.background = 'White'; 
    } 

Answer 2

你似乎没有被分配到任何变量 'theform'。

我猜JS错误正在发生，使验证无效，所以表单只是被提交。

Answer 3

根据你的代码&假设你熟悉的jQuery做到这一点本书虽然有可能是更容易的方式...

1）通“这个”你的功能

<form name="firstform" method="post" onsubmit="return validateform(this)" action="secondform.php"> 

2）验证功能

function validateform(myForm) 
{ 
    $(myForm).find('input').each(function(){ 
    var val_trim = $.trim($(this).val()); 
    var input_name = $(this).attr('name'); 
    if(val_trim.length == 0) 
    { 
     return false; 
    } 
    else 
    { 
     if(input_name == 'Email') 
     { 
      validateEmail(val_trim); 
     } 
     else if(input_name == 'Country') 
     { 
      ... 
     } 
    } 
    }) 
}