使用 JavaScript 验证多个表单字段 [关闭]

Question

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

我正在处理这个页面：http://camp-tags.com/?main_page=contact

提前感谢您找我。

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

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

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

    function validateForm(event){
    var form1 = document.getElementById("form1"),
    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}$/;

    var errors = [];
    if (phone){
    event.preventDefault();
    errors.push("The Phone Number is required.");
    return false;
    } else if (tomatch.test(phone)){
        return true;
    } else {
        event.preventDefault();
        errors.push("The phone number must be formated as follows: XXX-XXX-XXXX.");
        return false;
    }

    if (name === null || name === " "){
        event.preventDefault();
        errors.push("The Name is required.");
        return false;
    } else {
        return true;
    }

    if (email === null || email === " "){
        event.preventDefault();
        errors.push("The email is required.");
        return false;
    } else if (emailMatch.test(email)){
        return true;
    } else {
        event.preventDefault();
        errors.push("The email must be formated as follows: name@domain.com.");
        return false;
    }

    if (address === null || address === " "){
        event.preventDefault();
        errors.push("The Address is required.");
        return false;
    } else {
        return true;
    }
    if(errors.length > 0){
        for(var i=0;i<errors.length;i++){
            alert(errors)
        }
        return false;
    } else {
        return true;
    }   
}

html:

给我们发送电子邮件

                <form enctype="multipart/form-data" action="assets/mailer.php" method="POST" id="form1" onSubmit="return validateForm()">
     <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>
    <script type="text/javascript" src="./assets/validation.js">

Answer 1

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

执行 event.preventDefault();你觉得event 有什么？

您应该在提交时调用函数并在函数定义中提供参数时传递它

onSubmit="validateForm(event);"

函数定义应该是：

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>