JavaScript表单验证适用于Chrome / Firefox，而不适用于IE / Edge

Question

我正在使用JavaScript进行表单验证。它可以在Firefox 52.7.3和Chrome 65.0.3325.162中运行，但我刚刚意识到它在Internet Explorer 11或Edge 38.14393.2068.0中不起作用。在进行大量更改之前，它确实在所有浏览器中都有效，而且我不知道哪里出了错。在IE和Edge中，它仍将通过电子邮件发送表单，但不会验证任何错误。我非常感谢我能提供的任何帮助，以为我终于取得了进展，几乎发现自己无法在所有浏览器中正常工作，这让我非常沮丧。

代码：

function validateForm() {

  var firstName = document.getElementById("fName").value;
  var lastName = document.getElementById("lName").value;
  var city = document.getElementById("city").value;
  var zipCode = document.getElementById("zip").value;
  var address = document.getElementById("address").value;
  var area = document.getElementById("areaCode").value;
  var phone = document.getElementById("phoneNumber").value;
  var email1 = document.getElementById("email1").value;

  if (document.getElementById("fName").value == "First Name") {
    alert("Please enter your first name");
    return false;
  }

  if (!firstName.match(/^[a-zA-Z]+$/)) {
    alert("Please use only letters A - Z for first name");
    return false;
  }

  if (document.getElementById("lName").value == "Last Name") {
    alert("Please enter your last name");
    return false;
  }
  if (!lastName.match(/^[a-zA-Z]+$/)) {
    alert("Please use only letters A - Z for last name");
    return false;
  }

  if (document.getElementById("address").value === "") {
    alert("Please enter your address");
    return false;
  }
  if (!address.match(/^[a-z0-9]+$/i)) {
    alert("Please use only letters and numbers in address");
    return false;
  }

  if (document.getElementById("city").value === "") {
    alert("Please enter your city");
    return false;
  }
  if (!city.match(/^[a-zA-Z]+$/)) {
    alert("Please use only letters A - Z for city");
    return false;
  }
  if (document.getElementById("state").value == "--Select--") {
    alert("Please select your state");
    return false;
  }
  if (document.getElementById("zip").value === "") {
    alert("Please enter your zip code");
    return false;
  }
  if (isNaN(document.getElementById("zip").value)) {
    alert("Please enter only numbers for Zip Code");
    return false;
  }
  if (!zipCode.match(/(^\d{5}$)|(^\d{5}-\d{4}$)/)) {
    alert("Please enter a valid 5 digit US zip code.");
    return false;
  }

  if (document.getElementById("areaCode").value === "") {
    alert("Please enter your area code");
    return false;
  }
  if (!area.match(/(^\d{3}$)|(^\d{3}-\d{2}$)/)) {
    alert("Please enter a valid 3 digit area code.");
    return false;
  }
  if (document.getElementById("phoneNumber").value === "") {
    alert("Please enter your phone number");
    return false;
  }
  if (!phone.match(/(^\d{7}$)|(^\d{7}-\d{6}$)/)) {
    alert("Please enter a valid 7 digit phone number.");
    return false;
  }
  if (document.getElementById("email1").value === "") {
    alert("Please enter your e-mail address");
    return false;
  }
  if (!email1.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) {
    alert("You have entered an invalid e-mail address");
    return false;
  }
  if (document.getElementById("email2").value === "") {
    alert("Please confirm your email address");
    return false;
  }

  if (!email1.match(document.getElementById("email2").value)) {
    alert("Confermation email does not match");
    return false;
  }
  if (document.forms["myForm"]["mealPref"].value == "") {
    alert("Please choose a meal preference");
    return false;
  }

  if (document.forms["myForm"]["contMeth"].value === "") {
    alert("Please choose at least two contact methods");
    return false;
  }

}

function onBlur(el) {
  if (el.value === '') {
    el.value = el.defaultValue;
  }
}

function onFocus(el) {
  if (el.value == el.defaultValue) {
    el.value = '';
  }
}

body {
  background-color: #E6E6FA;
  color: #6918B4;
  text-align: center;
  font-family: Georgia;
  font-family: serif;
  font-size: 2vw;
}

h1 {
  color: #6918B4;
  text-align: center;
  font-size: 5vw;
}

table {
  font-family: Georgia;
  font-family: serif;
  font-size: 2vw;
  text-align: left;
}

table.center {
  margin-left: auto;
  margin-right: auto;
}

th {
  padding: 5px;
  vertical-align: top;
}

.areaCode {
  width: 8%;
  margin-right: 1px;
}

.phoneNumber {
  width: 20%;
}

.zip {
  width: 20%;
}

<!DOCTYPE html>

<html>

<head>

  <title>Registration Form</title>

  <link rel="stylesheet" type="text/css" href="css/myForm.css">
  <script src="js/form.js"></script>
</head>

<body>

  <h1>Registration Form</h1>

  <div id="content">

    <form name="myForm" onsubmit="return validateForm()" action="mailto:SelkieFaery@gmail.com" method="post" enctype="text/plain">
      <br>
      <fieldset>

        *required fields<br>
        <br>
        <p id="demo"></p>
        <br>
        <table class="center">
          <tr>
            <th>First Name:*</th>
            <th><input type="text" id="fName" value="First Name" onblur="onBlur(this)" onfocus="onFocus(this)" name="firstName"></th>
          </tr>
          <tr>
            <th>Last Name:*</th>
            <th><input type="text" id="lName" value="Last Name" onblur="onBlur(this)" onfocus="onFocus(this)" name="lastName"></th>
          </tr>
          <tr>
            <th>Address:*</th>
            <th><input type="text" id="address" name="address"></th>
          </tr>
          <tr>
            <th>City:*</th>
            <th><input type="text" id="city" name="city"></th>
          </tr>
          <tr>
            <th>State:*</th>
            <th>
              <select name="state" id="state">
                <option value="--Select--">--Select--</option>
                <option value="Alabama">Alabama</option>
                <option value="Alaska">Alaska</option>
                <option value="Arizona">Arizona</option>
                <option value="Arkansas">Arkansas</option>
                <option value="California">California</option>
                <option value="Colorado">Colorado</option>
                <option value="Connecticut">Connecticut</option>
                <option value="Delaware">Delaware</option>
                <option value="Florida">Florida</option>
                <option value="Georgia">Georgia</option>
                <option value="Hawaii">Hawaii</option>
                <option value="Idaho">Idaho</option>
                <option value="Illinois">Illinois</option>
                <option value="Indiana">Indiana</option>
                <option value="Iowa">Iowa</option>
                <option value="Kansas">Kansas</option>
                <option value="Kentucky">Kentucky</option>
                <option value="Louisiana">Louisiana</option>
                <option value="Maine">Maine</option>
                <option value="Maryland">Maryland</option>
                <option value="Massachusetts">Massachusetts</option>
                <option value="Michigan">Michigan</option>
                <option value="Minnesota">Minnesota</option>
                <option value="Mississippi">Mississippi</option>
                <option value="Missouri">Missouri</option>
                <option value="Montana">Montana</option>
                <option value="Nebraska">Nebraska</option>
                <option value="Nevada">Nevada</option>
                <option value="New Hampshire">New Hampshire</option>
                <option value="New Jersey">New Jersey</option>
                <option value="New Mexico">New Mexico</option>
                <option value="New York">New York</option>
                <option value="North Carolina">North Carolina</option>
                <option value="North Dakota">North Dakota</option>
                <option value="Ohio">Ohio</option>
                <option value="Oklahoma">Oklahoma</option>
                <option value="Oregon">Oregon</option>
                <option value="Pennsylvania">Pennsylvania</option>
                <option value="Rhode Island">Rhode Island</option>
                <option value="South Carolina">South Carolina</option>
                <option value="South Dakota">South Dakota</option>
                <option value="Tennessee">Tennessee</option>
                <option value="Texas">Texas</option>
                <option value="Utah">Utah</option>
                <option value="Vermont">Vermont</option>
                <option value="Virginia">Virginia</option>
                <option value="Washington">Washington</option>
                <option value="West Virginia">West Virginia</option>
                <option value="Wisconsin">Wisconsin</option>
                <option value="Wyoming">Wyoming</option>
              </select>
            </th>
          </tr>

          <tr>
            <th>Zip code:*</th>
            <th><input type="text" id="zip" class="zip" name="zip"></th>
          </tr>
          <tr>
            <th>Phone:*</th>
            <th><input type="text" id="areaCode" class="areaCode" name="areaCode">
              <input type="text" id="phoneNumber" class="phoneNumber" name="phoneNumber"></th>
          </tr>
          <tr>
            <th>Email:*</th>
            <th><input type="text" id="email1" name="emailAddress"></th>
          </tr>
          <tr>
            <th>Confirm Email:*</th>
            <th><input type="text" id="email2" name="confirmEmail"></th>
          </tr>
          <tr>
            <th>Meal Preference:*<br> (select one)</th>
            <th><input type="radio" name="mealPref" id="vegan" value="Vegan">
              <label for="vegan">Vegan</label><br>
              <input type="radio" name="mealPref" id="vegetarian" value="Vegetarian">
              <label for="vegetarian">Vegetarian</label><br>
              <input type="radio" name="mealPref" id="nonVeg" value="Non-Vegetarian">
              <label for="nonVeg">Non-Vegetarian</label><br></th>
          </tr>
          <tr>
            <th>Contact Method:*<br> (select more than one)</th>
            <th><input type="checkbox" name="contMeth" id="phone" value="Phone">
              <label for="phone">Phone</label>
              <input type="checkbox" name="contMeth" id="email" value="E-Mail">
              <label for="email">E-Mail</label><br>
              <input type="checkbox" name="contMeth" id="mail" value="Mail">
              <label for="mail">Mail</label>
              <input type="checkbox" name="contMeth" id="linkedIn" value="LinkedIn">
              <label for="linkedIn">LinkedIn</label></th>
          </tr>
          <tr>
            <th>Comments:</th>
            <th><textarea rows="4" cols="50" name="comment"></textarea></th>
          </tr>
        </table>
        <input type="submit" value="Submit"><br>
        <br>
      </fieldset>
    </form>

  </div>

</body>

</html>

Answer 1

我以为我在发布后几分钟删除了它。原来，错误与代码无关，而与我正在使用的计算机有关。某些原因阻止了代码正常工作。我将其上传到Google驱动器，然后再次下载，它神奇地起作用了。我之所以使用自己的默认占位符，是因为我的JavaScript教授希望我们使用JavaScript函数来做到这一点。我仍然不确定到底是什么问题，但现在已解决。