带有 Javascript 验证和警报的 HTML 表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21151687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Form with Javascript Validation & Alert
提问by Zeb23
I'm working on a class project and I am wondering if anyone can provide some input/info as to how I would go about to validating my form fields in a better way. Specifically, I want the alert box to pop up to show all of the missing required fields instead of one box per missing field. Any input would be swell.
我正在做一个课堂项目，我想知道是否有人可以提供一些关于我将如何以更好的方式验证我的表单字段的输入/信息。具体来说，我希望弹出警告框以显示所有缺少的必填字段，而不是每个缺少的字段一个框。任何输入都会膨胀。
<script type="text/Javascript">
function validateForm(assignmentForm)
{
valid = true
if (document.assignmentForm.firstName.value=="")
{
alert ("Please fill in your first name.");
valid = false;
}
if (document.assignmentForm.lastName.value=="")
{
alert ("Please fill in your last name.");
valid = false;
}
return valid;
}
</script>
I'm new to using javascript within HTML so I apologize in advance for what is most likely a very newbie question. Also, here's a snippet of the HTML portion:
我是在 HTML 中使用 javascript 的新手，所以我提前道歉，这很可能是一个非常新手的问题。此外，这是 HTML 部分的片段：
<!--Name Text Fields-->
<form id="assignmentForm" name="assignmentForm" method="post" onsubmit="return validateForm();">
<table cellspacing="15">
<tr>
<td><a href="#">First Name: </a></td>
<td><input type="text" id="firstName" name="firstName"></td>
</tr>
<tr>
<td><a href="#">Last Name: </a></td>
<td><input type="text" id="lastName" name="lastName"></td>
</tr>
回答by Barmar
Have each validation step add its message to an array that you display after all validations are done.
让每个验证步骤将其消息添加到您在所有验证完成后显示的数组中。
function validateForm(assignmentForm)
{
var messages = [];
if (document.assignmentForm.firstName.value=="")
{
messages.push("Please fill in your first name.");
}
if (document.assignmentForm.lastName.value=="")
{
messages.push("Please fill in your last name.");
}
if (messages.length > 0) {
alert(messages.join('\n'));
return false;
} else {
return true;
}
}
回答by Saladin Akara
If you create a string variable in the function before checking each field, you can then append a notification about which needs to be filled in.
如果在检查每个字段之前在函数中创建一个字符串变量，则可以附加一个关于需要填写的通知。
After all checks have been completed, then show the alert using the string you have built.
完成所有检查后，然后使用您构建的字符串显示警报。
I would also suggest that you check fields for valid data as well - this may not be necessary for the class work you are doing right now, but it is good practice for any real world code. For example, make sure that name is made of only characters.
我还建议您检查有效数据的字段 - 这对于您现在正在做的课堂工作可能不是必需的，但对于任何现实世界的代码来说都是很好的做法。例如，确保名称仅由字符组成。
