测试表单数据并返回单个错误消息(Javascript)

Question

在提交表单之前，我必须创建一个表单，并验证数据是否已输入其中(不一定是准确的数据)。我可以为每个字段分别发送消息，但我需要这样做，以便所有丢失的字段都显示在一条错误消息中(IE"You are missing lastname and address and…")。有人能帮我吗。提前感谢您的评论。

<FORM onSubmit='return checkForm()' NAME='customerform'>
<TABLE WIDTH=100% BORDER=1>
<TR><TD>First Name: <INPUT TYPE='TEXT' NAME='firstname'></TD>
<TD ALIGN=RIGHT> Last Name: <INPUT TYPE='TEXT' NAME='lastname'></TD></TR>
<TR><TD COLSPAN=2>Address: <INPUT TYPE='TEXT' NAME='address' size =50></TD></TR>
<TR><TD>City: <INPUT TYPE='TEXT' NAME='city'></TD>
<TD ALIGN=RIGHT>State: <INPUT TYPE='TEXT' NAME='state' size=3> Zip: <INPUT TYPE='TEXT' NAME='zip' size=6></TD>
<TR><TD COLSPAN=2>Email Address: <INPUT TYPE='TEXT' NAME='emailaddr' size=50></TD></TR>
<TR><TD><INPUT TYPE='submit' value='Submit'></TD>
<TD ALIGN=RIGHT><INPUT TYPE='reset'></TD></TR>
</TABLE></FORM>


function checkForm()
{
var data = document.customerform.firstname.value
if (data.length <= 0) {
alert("Please enter your first name, it is required for us to process your order.")
return false
}
data = document.customerform.lastname.value
if (data.length <= 0) {
alert("Please enter your last name, it is required for us to process your order.")
return false
}
data = document.customerform.address.value
if (data.length <= 0) {
alert("Please enter your address, it is required for us to process your order.")
return false
}
data = document.customerform.city.value
if (data.length <= 0) {
alert("Please enter your city name, it is required for us to process your order.")
return false
}
data = document.customerform.state.value
if (data.length <= 0) {
alert("Please enter your state name, it is required for us to process your order.")
return false
}
data = document.customerform.zip.value
if (data.length <= 0) {
alert("Please enter your zip code, it is required for us to process your order.")
return false
}
data = document.customerform.emailaddr.value
if (data.length <= 0) {
alert("Please enter your email, it is required for us to process your order.")
return false
}
} 

Answer 1

您的代码在每次检查后都有return false，因此如果其中一次检查失败，则永远不会继续进行其余的检查。您需要检查所有项目，并记录验证失败的项目(如果有的话)，然后写一条关于所有项目的消息。

现在，正如我在上面的评论中提到的，您的代码让人想起2000年的代码，需要大量更新才能遵循现代标准和最佳实践。

有关详细信息，请参阅代码中的注释：

// Get references to each element you'll want to work with:
var frm = document.querySelector("form");
// Set up event handlers the modern way and not via inline HTML event attributes
frm.addEventListener("submit", checkForm);
function checkForm(evt){
var items = [];   // Array to hold data-id's of invalid elements

// Loop through the form elements
for(var i = 0; i < frm.elements.length; i++){
// Check the element for no value
if(frm.elements[i].value === ""){
// If it has no value, put its custom data-id attribute value into the array
items.push(frm.elements[i].dataset.id);
}
}

// Check for errors and display message:
if(items.length > 0){
// Cancel the form's submission
evt.preventDefault();
// Turn all array items into a string, separated with commas and spaces
// but remove the last comma and space.
alert("You must provide entries for:n" + items.join(", ").slice(0, -2));
}
}

/* Use CSS for styling, not HTML*/
#address, #emailAddr { width:25em; }
#state { width:3em; }
#zip   { width:6em; }
label.left { 
display:inline-block;
width:100px; 
}
/* Just for fun: */
.row {
margin-bottom:.5em;
}
input[type=text] {
box-shadow:0 0 1px green;
}
input[type=text]:focus {
box-shadow:0 0 1px blue;
}

<!-- While HTML 5 can be written in any case you like, most would agree that
lower-case is easier to read. Next, don't use tables for layout, that's
the job of CSS. Also, use the <label> element for better accessibility.
But, most importantly here, if we use data-* attributes on the form
elements, we can store a custom string that can be used later. In our
case, in the error messages.  Take note of how clean the HTML is now
that the styling and JavaScript have been removed from it. -->
<form name='customerform' action='#' method=''>
<div class="row">
<label for="firstName" class="left">First Name: </label>
<input type='text' name='firstName' id="firstName" data-id="First Name">
<label for="lastName">Last Name: </label>
<input type='text' name='lastName' data-id="Last Name">
</div>
<div class="row">
<label for="address" class="left">Address: </label>
<input type='text' name='address' id="address" data-id="Street Address">
</div>
<div class="row">
<label for="city" class="left">City: </label>
<input type='text' name='city' id="city" data-id="City">
<label for="state">State: </label>
<input type='text' name='state' id="state" data-id="State">
<label for="zip">Zip: </label>
<input type='text' name='zip' id="zip" data-id="Zip Code">
</div>
<div class="row">
<label for="emailAddr" class="left">Email Address: </label>
<input type='text' name='emailAddr' id="emailAddr" data-id="Email Address">
</div>  
<div class="row">
<input type='submit' value='Submit'>
<input type='reset'>
</div>
</form>