JavaScript 表单验证

Question

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

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

Answer 1

您需要添加额外的表单元素(可能是一个 span，因为它们是内联的，而不是作为 block 元素的 div)来保存输入表单元素旁边的错误消息，并为其提供一个 id，以便你可以在你的javascript中引用它。像这样的事情:

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

然后在 Javascript 代码中，如果未验证，则将该表单元素的 innerHTML 设置为错误消息；如果验证，则将其设置为空字符串 ''，如下所示:

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