为什么即使所有字段都是空的，表单也会被提交？答案

【问题标题】：Why the form is getting submitted even if all the fields are empty?为什么即使所有字段都是空的，表单也会被提交？
【发布时间】：2020-09-23 05:51:02
【问题描述】：

为什么即使我将所有字段都留空，我的表单也会被提交。我无法弄清楚问题是什么。 if 循环对我来说看起来不错。

这是我的代码

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Javascript form check</title>
</head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<body style="margin-top: 30px; margin-left: 30px;">

  <form method="POST" action="form-handler" onsubmit="return checkForm(this);">
    <p>First Name <input type="text" size="32" name="first_name"></p>
    <p>Email Address <input type="text" size="32" name="email"></p>
    <p>Phone Number <input type="number" size="32" name="phoneno"></p>
    <p>Password <input type="password" size="32" name="pass"></p>
    <p>Verify Password <input type="password" size="32" name="pass_verify"></p>
    <p>Date of Birth <input type="date" size="32" name="date"></p>
    <p>Weight <input type="text" size="32" name="weight"></p>
      <input type="submit">
  </form>



  <script>

    function checkForm(form) {
      // validation fails if the input is blank
      if (form.first_name.value == "") {
        alert("Error: Input is empty!");
        form.first_name.focus();
        return false;
      }


      if (form.weight.length == 0)
      {
         alert("Invalid Weight");
         return false;
      }



      // regular expression to match only alphanumeric characters and spaces
      var re = /^[\w ]+$/;



      // validation fails if the input doesn't match our regular expression
      if (!re.test(form.first_name.value)) {
        alert("Error: Input contains invalid characters!");
        form.first_name.focus();
        return false;
      }



     //Code to Validate Phone Number
     var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
     if(!(form.phoneno.match(phoneno))
        {
        alert("Number must be 10 characters");
        return false;
        }


        //Code to validate password
        var passw= /^[A-Za-z]\w{4,14}$/;
        if(!(form.pass.match(passw)))
        {
        alert('Wrong password')
        return false;
        }


        //Code to validate email
        if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))){

        alert("You have entered an invalid email address!")
        return false;
       }

    }
  </script>
</body>

</html>

【问题讨论】：

标签： javascript forms

【解决方案1】：

您在这一行中缺少)

if(!(form.phoneno.match(phoneno)))

【讨论】：

【解决方案2】：

你的代码只是充满了错误，所以我在这里对其中的大部分进行了排序：

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Javascript form check</title>
</head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<body style="margin-top: 30px; margin-left: 30px;">

  <form method="POST" action="form-handler" onsubmit="return checkForm(this);" >
    <p>First Name <input type="text" size="32" name="first_name"></p>
    <p>Email Address <input type="text" size="32" name="email"></p>
    <p>Phone Number <input type="number" size="32" name="phoneno"></p>
    <p>Password <input type="password" size="32" name="pass"></p>
    <p>Verify Password <input type="password" size="32" name="pass_verify"></p>
    <p>Date of Birth <input type="date" size="32" name="date"></p>
    <p>Weight <input type="text" size="32" name="weight"></p>
      <input type="submit">
  </form>



  <script>

    function checkForm(form) {
   // validation fails if the input is blank
   if (form.first_name.value === "") {
     alert("Error: Input is empty!");
     form.first_name.focus();
     return false;
   }


   if (form.weight.length === 0) {
     alert("Invalid Weight");
     return false;
   }



   // regular expression to match only alphanumeric characters and spaces
   var re = /^[\w ]+$/;



   // validation fails if the input doesn't match our regular expression
   if (!re.test(form.first_name.value)) {
     alert("Error: Input contains invalid characters!");
     form.first_name.focus();
     return false;
   }



   //Code to Validate Phone Number
   var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
   if (!(form.phoneno.match(phoneno))) {
     alert("Number must be 10 characters");
     return false;
   }


   //Code to validate password
   var passw = /^[A-Za-z]\w{4,14}$/;
   if (!(form.pass.match(passw))) {
     alert('Wrong password')
     return false;
   }


   //Code to validate email
   if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))) {

     alert("You have entered an invalid email address!");
     return false;
   }

 }
  </script>
</body>

</html>

在这里工作：https://jsfiddle.net/chj8rpxv/1/

【讨论】：

【解决方案3】：

<body>
    <form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post" required>
        Name: <input type="text" name="fname">
        <input type="submit" value="Submit">
    </form>
    <script>
        function validateForm() {
            var x = document.forms["myForm"]["fname"].value;
            if (x == "") {
                alert("Name must be filled out");
                return false;
            }
        }
    </script>
</body>

【讨论】：