JavaScript 表单验证适用于 Chrome/Firefox 而不是 IE/Edge答案

【问题标题】：JavaScript Form Validation works in Chrome/Firefox not IE/EdgeJavaScript 表单验证适用于 Chrome/Firefox 而不是 IE/Edge
【发布时间】：2018-06-26 02:44:10
【问题描述】：

我正在使用 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>

【问题讨论】：

我建议您自己购买一些版本控制软件，例如 Git，并在进行更改之前学习分支您的项目。在像您这样的情况下，您可以恢复到以前的提交或分支以撤消您的更改。另外，你知道如何使用开发者工具来单步调试你的 JavaScript 代码吗？
为什么要使用自己的默认占位符而不是使用placeholder 属性？
Javascript 控制台不工作时是否有错误？
我在 IE11 和 Edge 42 中尝试了上面的 sn-p 并且验证正确。

标签： javascript html forms validation

【解决方案1】：

我以为我在发布后删除了这一分钟。事实证明，错误不在于代码，而在于我正在使用的计算机。有些东西阻止了代码正常工作。我将它上传到谷歌驱动器并再次下载它，它神奇地工作。我正在做我自己的默认占位符，因为我的 JavaScript 教授希望我们使用 JavaScript 函数来做。我仍然不确定问题是什么，但现在已修复。

【讨论】：