Javascript多字段/表单验证

是的，我知道有很多关于表单验证的问题，但是虽然有些问题已经非常接近我想要实现的目标，但我认为这是独一无二的

我有一个JS fiddle脚本，我想用它返回所有未填写的字段。我觉得这是一种更好的方法，因为我在下面的代码中尝试通过多字段验证实现相同的结果：

function validate ( )
{
valid = true;

if ( document.contactinfo.Name.value == "" )
{
    alert ( "You need to fill the name field!" );
    valid = false;
}

  if ( document.contactinfo.email.value == "" )
{
    alert ( "You need to fill in your email!" );
    valid = false; //change variable valid to false
}
return valid;
}

虽然上面的工作并显示多个警报框，但我必须手动提醒他们几次需要填写哪些字段。我更愿意发出警报，告诉他们在一次突击中缺少哪些领域，并将重点放在这些领域。JS fiddle脚本可以做到这一点，但是，我一直得到一个错误：

ValidateRequiredFields未定义

我看不出问题在哪里。我已经正确命名了所有内容，表单数据应该被忽略

有什么想法吗？像往常一样，如有需要，要求澄清。谢谢

---

注意：我不想使用JQuery，因为我知道它们有非常简单的插件，允许您设置所需的类

我不知道小提琴错误，但关于您的脚本，有几个改进：

您可以通过将所有消息收集到一个字符串中并执行单个警报来改进这一点

function validate ( ) {
  var valid = true;
  var msg="Incomplete form:\n";
  if ( document.contactinfo.Name.value == "" ) {
    msg+="You need to fill the name field!\n";
    valid = false;
  }
  if ( document.contactinfo.contact_email.value == "" ) {
    msg+="You need to fill in your email!\n";
    valid = false;
  }
  if (!valid) alert(msg);
  return valid;
}

改进，将焦点返回到出错的第一个字段，并更改有问题字段的边框颜色：

function validate ( ) {
  var valid = true;
  var msg="Incomplete form:\n";
  if ( document.contactinfo.Name.value == "" ) {
    if (valid)//only receive focus if its the first error
      document.contactinfo.Name.focus();
    //change border to red on error (i would use a class change here...
    document.contactinfo.Name.style.border="solid 1px red";
    msg+="You need to fill the name field!\n";
    valid = false;
  }
  if ( document.contactinfo.contact_email.value == "" ) {
    if (valid)
      document.contactinfo.contact_email.focus();
    document.contactinfo.contact_email.style.border="solid 1px red";
    msg+="You need to fill in your email!\n";
    valid = false;
  }
  if (!valid) alert(msg);
  return valid;
}

现在，上面的代码发出错误信号，将焦点返回到第一个错误，并在有错误的字段上加上红色边框。。。我们仍然需要一些改进。 首先，一旦字段有效，我们需要删除红色边框。。这可以在上面的每个字段检查中使用else来完成。。。然而，我假设每个字段只有一个错误条件，但情况可能并非如此。 例如：电子邮件字段可以检查是否为非空和有效电子邮件

清理的一种方法是删除边界处的所有红色边框，然后开始验证

style.border=“…”只是一种简单的方法，如果没有错误，我更喜欢类更改和类删除

上面的糖是：

-一旦字段变得有效，我们需要删除红色边框

-创建包含名称、条件和消息的所有字段的数组

---

通过循环阵列自动执行该过程。这样，我们就可以进行一个清理边界的循环和另一个检查条件的循环，以一个紧凑且可重用的代码结束

是的，我的想法和你对错误信息的理解是一样的。如果我这样做

（！document.contactinfo.Name.value.match（/^[a-zA-Z-']+$/）

，那么它就会工作。它是说如果它不符合这种格式。这还检查字段是否为空。非常方便重复检查字段是否输入以及输入是否正确。谢谢你的帮助。是的，如果你喜欢使用js或regex，或者使用单独的条件，我也有类似的工作，但我使用类来指定条件。。。如“必需”、“电子邮件”、“数字”、“完整”、“屏蔽”等。。。。使用like class=“required email”组合了太多条件