带有Javascript验证的HTML表单&警报

时间:2014-01-16 01:18:02

标签: javascript html forms validation textfield

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

<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部分的片段:

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

2 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:0)

如果在检查每个字段之前在函数中创建字符串变量,则可以附加有关需要填写的通知。

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

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