如果在数组中找到匹配,如何停止javascript循环

Question

我试图找到一些修复,但似乎没有找到我正在寻找的东西.也许是我的措辞.

所以我有这个表单,一旦它提交一个5位数的邮政编码,它检查一个数组的匹配值,一旦匹配我希望它显示成功消息,如果它不匹配然后返回不匹配,但目前它返回消息的时间与数组一样多.我仍然是相当新的JavaScript,所以任何帮助将不胜感激.提前致谢!

JavaScript的:

<script>
function getZip(e) {
    e.preventDefault();
    var zip = document.getElementById('zip').value; // Gets the value from the text field "zip" on the form.
    var result = ["48650", "48611", "48746", "48614", "48706"];

    for (var i = 0; i < result.length; i++) {
        //console.log(result[i]);

        //if (zip.length == 5 && zip == result[i]){
        if (zip == result[i]) {
            console.log(zip + " is = to " + result[i]);
            alert('Match ' + zip);

        } else if (result[i] != zip) {
            alert("No Match1");
            console.log(zip + " is != to " + result[i]);

        } else {
            alert("No Match2");
            console.log(zip + " is != to " + result[i]);
        }
        //return false;
    }
    if (zip === "") { // Checks if the text field "zip" is empty, if so it returns an error message.
        alert('Please enter a zip code!');

    } else if (zip.length > 5) {
        alert("Please enter a valid 5 digit numeric zip code.");

    } else if (zip.length < 5) {
        alert("Please enter a valid 5 digit numeric zip code.");

    } else if (isNaN(zip)) { // Checks if the text field "zip" for alphabetic characters. The "isNaN" function is to determine if a value does not convert to a number, if so it returns an error message.
        alert("Please enter a numeric value.");
    }
}
</script>

形成:

<div class="searchZip">
    <p>Please enter your zip code for availability</p>
    <form>
        <input type="text" name="zip" id="zip" placeholder="Zip Code">
        <button onclick="getZip(event);">Check</button>
    </form>
    <p id="display"></p>
</div>

Answer 1

使用break来摆脱循环.

在你的情况下,没有必要for,用于Array#indexOf检查数组是否包含元素.

您还可以将HTML5 pattern属性与regex一起使用[1-9][0-9]{4}.

var result = ["48650", "48611", "48746", "48614", "48706"],
  display = document.getElementById('display');

function getZip(e) {
  e.preventDefault();
  var zip = document.getElementById('zip').value,
    message = '',
    className = 'valid';

  // Remove classes
  display.classList.remove('valid')
  display.classList.remove('invalid');

  // Check if entered valid zipcode
  if (/^[1-9][0-9]{4}$/.test(zip) === false) {
    message = 'Please enter valid 5 digit zip code';
    className = 'invalid';
  } else {
    var index = result.indexOf(zip);

    if (index > -1) {
      message = 'Zip ' + zip + ' found at index ' + index;
    } else {
      message = 'Zip not found in array';
    }
  }

  // Show message
  display.innerHTML = message;
  display.classList.add(className);
}

#zip:invalid,
.invalid {
  color: red;
}
.valid {
  color: green;
}

<div class="searchZip">
  <p>Please enter your zip code for availability</p>
  <form>
    <input type="text" name="zip" id="zip" placeholder="Zip Code" pattern="[1-9][0-9]{4}">
    <button onclick="getZip(event);">Check</button>
  </form>
  <p id="display"></p>
</div>

Answer 2

正如其他人所说,你可以break用来退出循环.

我不会使用循环.相反,我会使用该.some函数来确定是否匹配:

function getZip(e) {
  e.preventDefault();
  var zip = document.getElementById('zip').value; // Gets the value from the text field "zip" on the form.
  var result = ["48650", "48611", "48746", "48614", "48706"];

  if (zip === "") { // Checks if the text field "zip" is empty, if so it returns an error message.
    alert('Please enter a zip code!');

  } else if (zip.length > 5) {
    alert("Please enter a valid 5 digit numeric zip code.");

  } else if (zip.length < 5) {
    alert("Please enter a valid 5 digit numeric zip code.");

  } else if (isNaN(zip)) { // Checks if the text field "zip" for alphabetic characters. The "isNaN" function is to determine if a value does not convert to a number, if so it returns an error message. 
    alert("Please enter a numeric value.");
  } else {
    var match = result.some(function(r) {
      return zip === r;
    });

    if (match) {
      alert('Match ' + match);
    } else {
      alert("No Match");
    }
  }
}

<div class="searchZip">
  <p>Please enter your zip code for availability</p>
  <form>
    <input type="text" name="zip" id="zip" placeholder="Zip Code">
    <button onclick="getZip(event);">Check</button>
  </form>
  <p id="display"></p>
</div>

或者,您可以使用indexOf像您这样的简单匹配.