使用JavaScript验证多个表单字段

我已经搜索了这个网站，虽然我发现了类似的问题，但我无法得到我需要的答案，所以我现在正在询问。我需要验证一个联系人表单，PHP验证非常简单，但在基本层面上有效，我想通过JS进行浏览器验证来补充这一点，但它不起作用，JS验证没有触发或编码不正确

我正在做这个页面：

提前谢谢你找我

函数应该循环并确保这4个元素不是空的，phonenumber和email的两个变量的格式都正确。如果任何标志为false，则应将错误推送到数组，然后在单个警报中输出所有错误

下面是代码。使用此处提供的提示进行更新。现在根本没有验证

*更新：我发现了一个明显的错误，我不敢相信我错过了。我在上没有结束标记，现在已经完成，除非您输入正确的电话，否则表单将不会发送，但不会验证其余内容，并且不会发出警报来告知问题所在？ JS:

html:

给我们发电子邮件

---

我不知道从哪里开始，但是如果您需要自己的验证，您应该从输入中删除必需的属性，因为例如FF将检查表单而不是验证函数

执行event.preventDefault；你认为在这次活动中你有什么收获

在submit上调用函数时，应该适当地传递它，并在函数定义中提供一个参数

onSubmit="validateForm(event);"

功能定义应为：

function validateForm(event) {
  ... 
  so you can do event.preventDefault()
  ...
}

您可能还有其他问题，但至少您将执行验证函数，并且您可以；I’我要参加一个活动

添加完整示例：

<script>

function validateForm(event) {

    var phone = document.getElementById("phonenumber").value,
    email = document.getElementById("email").value,
    name = document.getElementById("name").value,
    address = document.getElementById("address").value,
    tomatch = /^\d{3}-\d{3}-\d{4}$/,
    emailMatch = /^\[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[A-Z]{2,4}$/,
    errors = [];

    if (!phone){
      errors.push("The Phone Number is required.");
    } else if (!tomatch.test(phone)){
      errors.push("The phone number must be formated as follows: XXX-XXX-XXXX.");
    }

    if (!name){
      errors.push("The Name is required");
    }

    if (!email){
      errors.push("The email is required.");
    } else if (!emailMatch.test(email)){
      errors.push("The email must be formated as follows: name@domain.com.");
    }

    if (!address){
      errors.push("The Address is required.");
    }

    if (errors.length) {
      event.preventDefault();
      alert(errors.join("\n"));
    }

}
</script>

<form enctype="multipart/form-data" action="assets/mailer.php" method="POST" id="form1" onSubmit="validateForm(event)">
 <label for="Name">Name:</label><br />
 <input size="100%" type="text" name="name" id="name"><br>
 <label for="Email">E-mail:</label><br />
 <input size="100%" type="text" name="email" id="email" value=""><br />
 <label for="Phone">Phone Number:</label><br />
 <input size="100%" type="text" name="phonenumber" id="phonenumber" value=""><br />
 <label for="Address">Shipping Address:</label><br />
 <input size="100%" type="text" name="address" id="address" value=""><br />

 <label for="comment">Input Comments/Questions:</label><br />
 <input size="100%" type="text" name="comment" value=""><br><br>
  Please choose a file: <br />
 <input name="uploaded" type="file" /><br />
 <br />

 <input size="100%" type="submit" value="Submit" /><br />
 <input size="100%" type="reset" value="Reset">
</form>

---

如果您解释了您所做的事情，而不是阅读所有代码，并试图了解在许多javascript错误上发生了什么，那么会更容易。。。只需查看一些文档。上面的链接仅显示单个元素的验证，它不带您浏览多个元素。JavaScript不是我的强项，所以真正的帮助会很有帮助，因为我可以验证单个元素而不会出现问题，我很难让它在多个元素上工作。事件实际上是邮件发送者，在从表单中删除required后，现在不会在JS停止时触发它，但不会警告任何错误。所以我还是看不出什么不起作用。检查我刚刚添加的站点链接。正如我告诉你的，有很多错误。。。但照我说的做。。。并将if phone===null | | phone===更改为if phone，这样至少手机将开始验证。1我提到的活动参数是否通过2如果。。。3开始调试！！！如果你使用FireFox下载FireBug插件给你最好的朋友。。。在函数的开头添加一些前置点。。。还有很多错误需要纠正！event.preventDefault和return false正在执行相同的操作，但return false不久将被弃用。firebug或Chrome未发现任何错误，但现在它根本无法验证。现在我更糊涂了。我更新了上面的代码，以反映我所做的更改。谢谢你，到目前为止，我发现了一个很大的问题，这是我的错，没有结束脚本标记，如果你转到上面的网站链接，它将不会发送，除非你得到正确的电话号码，但没有发出警报来通知你有什么错误？

function validateForm(event) {
  ... 
  so you can do event.preventDefault()
  ...
}

<script>

function validateForm(event) {

    var phone = document.getElementById("phonenumber").value,
    email = document.getElementById("email").value,
    name = document.getElementById("name").value,
    address = document.getElementById("address").value,
    tomatch = /^\d{3}-\d{3}-\d{4}$/,
    emailMatch = /^\[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[A-Z]{2,4}$/,
    errors = [];

    if (!phone){
      errors.push("The Phone Number is required.");
    } else if (!tomatch.test(phone)){
      errors.push("The phone number must be formated as follows: XXX-XXX-XXXX.");
    }

    if (!name){
      errors.push("The Name is required");
    }

    if (!email){
      errors.push("The email is required.");
    } else if (!emailMatch.test(email)){
      errors.push("The email must be formated as follows: name@domain.com.");
    }

    if (!address){
      errors.push("The Address is required.");
    }

    if (errors.length) {
      event.preventDefault();
      alert(errors.join("\n"));
    }

}
</script>

<form enctype="multipart/form-data" action="assets/mailer.php" method="POST" id="form1" onSubmit="validateForm(event)">
 <label for="Name">Name:</label><br />
 <input size="100%" type="text" name="name" id="name"><br>
 <label for="Email">E-mail:</label><br />
 <input size="100%" type="text" name="email" id="email" value=""><br />
 <label for="Phone">Phone Number:</label><br />
 <input size="100%" type="text" name="phonenumber" id="phonenumber" value=""><br />
 <label for="Address">Shipping Address:</label><br />
 <input size="100%" type="text" name="address" id="address" value=""><br />

 <label for="comment">Input Comments/Questions:</label><br />
 <input size="100%" type="text" name="comment" value=""><br><br>
  Please choose a file: <br />
 <input name="uploaded" type="file" /><br />
 <br />

 <input size="100%" type="submit" value="Submit" /><br />
 <input size="100%" type="reset" value="Reset">
</form>