使用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

您似乎没有为变量'theform'分配任何内容。

我猜测正在发生JS错误，导致验证失效，因此表单才会被提交。

Answer 2

根据您的代码和＆amp;假设你熟悉jQuery这样做可能会有更简单的方法......

1）在你的函数中传递'this'

<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')
        {
           ...
        } 
     }
  })
}