Javascript表单验证

目前我有一个带有javascript验证的Html表单。当前，通过使用alert命令在弹出窗口中显示错误。。。。如何在文本框旁边显示错误消息？以下是我目前的代码：

 if (document.gfiDownloadForm.txtFirstName.value == '') {
  alert('Please fill in all required fields');
  return false;
 }

 var filter = /^([a-zA-Z '-]+)$/i
 if (filter.test(document.gfiDownloadForm.txtFirstName.value) == false) {
  alert('Please enter a valid First name');
  return false;
 }

 var filter = /^([a-zA-Z '-]+)$/i
 if (filter.test(document.gfiDownloadForm.txtLastName.value) == false) {
  alert('Please enter a valid Last name');
  return false;
 }


 if (document.gfiDownloadForm.txtCompany.value == '') {
  alert('Please enter a Company name');
  return false;
 }

在输入字段旁边应该有一个

或

，只需将

的内容设置为相应的错误消息，而不是

警报

语句

e、 g

在输入字段旁边应该有一个

或

，只需将

的内容设置为相应的错误消息，而不是

警报

语句

e、 g

---

您需要添加额外的表单元素（可能是一个span，因为它们是内联的，而不是一个div，它是一个块元素），以便在输入表单元素旁边保存错误消息，并给它一个id，以便您可以在javascript中引用它。大概是这样的：

<input type="text" id="txtFirstName" /><span id="firstNameError"></span>

---

您需要添加额外的表单元素（可能是一个span，因为它们是内联的，而不是一个div，它是一个块元素），以便在输入表单元素旁边保存错误消息，并给它一个id，以便您可以在javascript中引用它。大概是这样的：

<input type="text" id="txtFirstName" /><span id="firstNameError"></span>

---

确保还具有服务器端验证；）确保还具有服务器端验证；）在这两种情况下都返回

false

；错误此外，在使用DOM level 2事件绑定时，您应该使用事件接口的相应函数/属性来停止默认行为。是的，这是我的错误。由于返回值似乎没有在问题中的示例代码中使用，所以在将其复制到我自己的代码中时，我没有太多注意它。编辑答案，如果正确验证，则返回true。在这两种情况下，您都返回

false

；错误此外，在使用DOM level 2事件绑定时，您应该使用事件接口的相应函数/属性来停止默认行为。是的，这是我的错误。由于返回值似乎没有在问题中的示例代码中使用，所以在将其复制到我自己的代码中时，我没有太多注意它。编辑答案，如果正确验证，则返回true。

if (filter.test(document.gfiDownloadForm.txtFirstName.value) == false) {
    document.getElementById("firstNameError").innerHTML = 'Please enter a valid First name.';
    return false;
}
else {
    document.getElementById("firstNameError").innerHTML = '';
    return true;
}