带有 Javascript 验证和警报的 HTML 表单答案

【问题标题】：HTML Form with Javascript Validation & Alert带有 Javascript 验证和警报的 HTML 表单
【发布时间】：2014-02-04 18:20:12
【问题描述】：

我正在做一个课堂项目，我想知道是否有人可以提供一些输入/信息，说明我将如何以更好的方式验证我的表单字段。具体来说，我希望弹出警报框以显示所有缺少的必填字段，而不是每个缺少的字段一个框。任何输入都会膨胀。

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

我是在 HTML 中使用 javascript 的新手，所以我提前为最有可能是一个非常新手的问题道歉。另外，这里是 HTML 部分的 sn-p：

<!--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>

【问题讨论】：

您好，如果您提出具体问题，我们可以为您提供帮助，“更好”是一个见仁见智的问题。另外，你应该先google一下关于警告框的信息，网上有很多关于这个的信息。

标签： javascript html forms validation textfield

【解决方案1】：

如果您在检查每个字段之前在函数中创建了一个字符串变量，那么您可以附加一个需要填写的通知。

完成所有检查后，使用您构建的字符串显示警报。

我还建议您检查有效数据的字段 - 这对于您现在正在做的课堂作业可能不是必需的，但对于任何现实世界的代码来说，这是一个很好的做法。例如，确保名称仅由字符组成。

【讨论】：

【解决方案2】：

让每个验证步骤将其消息添加到所有验证完成后显示的数组中。

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;
    }
}

【讨论】：

你们是巫师。非常感谢！