Javascript 检查输入是否为特定字符串答案

【问题标题】：Javascript check if input is a specific stringJavascript 检查输入是否为特定字符串
【发布时间】：2017-08-01 20:44:12
【问题描述】：

我有一个 HTML 输入字段，我需要 javascript 来检查输入到此框中的输入是否是某个字符串。具体来说，它必须是一个特定的邮政编码，总共有 9 个不同的邮政编码，它们都是不同的，并且没有数字顺序。一旦代码检查它是否是那个特定的邮政编码，它会返回“是”，如果不是，则返回“否”。

我知道如何使用 int 执行此操作，如下面的代码所示，但不确定如何使用字符串执行此操作。这是我当前的代码，可用于验证 1-10 之间的整数：

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x, text;

    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;

    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

【问题讨论】：

使用parseInt as .value 将把它作为一个字符串返回，即使它是一个数字
将有效值存储在数组中并检查输入的值是否在数组中
如果您想支持 zip + 4 代码，您必须使用字符串而不是整数。

标签： javascript html validation input

【解决方案1】：

我觉得你想多了。您可以使用indexOf 函数来测试您的邮政编码数组。

var btn= document.getElementById("btn");
var input = document.getElementById("numb");
var output = document.getElementById("demo"); 
var formArea = document.getElementById("formArea"); 

var zips = ["11111","22222","33333","44444","55555", "e1", "e2"];

btn.addEventListener("click", function() {
    var result = null;

    // indexOf() returns -1 when the supplied value isn't present
    if(zips.indexOf(numb.value.toLowerCase()) > -1){
      result =  "yes";
      
      // Show the form by removing the hidden class
      formArea.classList.remove("hidden");
    } else {
      result = "no";
      // Hide the form by adding the hidden class
      formArea.classList.add("hidden");      
    }
    output.textContent = result;

});

#formArea{
  border:2px double grey;
  width:50%;
  box-shadow:2px 2px 0 #303030;
  height:100px;
  padding:5px;
}

.hidden { 
  display:none; 
}

<input id="numb">

<button type="button" id="btn">Submit</button>

<p id="demo"></p>

<div id="formArea" class="hidden ">
  Your form goes here
</div>

【讨论】：

这行得通，除了它们是邮政编码，所以其中一个是“E1”。当我输入“E1”时，它可以工作，但“e1”不起作用。我该如何做到这一点，无论大小写，值都会被验证？
@user3371494 要将 sings 视为不区分大小写，只需对要比较的字符串使用 .toLowerCase() 方法，并确保存储在数组中的字符串包含小写值。我将更新答案以显示这一点。
太棒了，非常感谢。如果你能帮助我，我还有一件事。如果输入任何这些邮政编码，我有一个联系表格，我想显示该表格。在某个邮政编码被击中之前，我将如何隐藏它？
@user3371494 也很简单。您只需使用默认隐藏它的 CSS 类提前设置表单。然后，在您确定代码匹配的同一段代码中，删除该类。我将再次更新答案以显示这一点。不要忘记标记为“the”答案。

【解决方案2】：

您可以对邮政编码使用正则表达式吗？请注意，这说明了一组字符串格式的邮政编码，但欢迎您创建一个可以满足您感兴趣的邮政编码集的邮政编码正则表达式。此外，如果该集足够小，您可以可能只是在列表/集合中枚举它们并检查集合是否包含输入。

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x, text;

    var isValidZip = /(^\d{5}$)|(^\d{5}-\d{4}$)/;

    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;

    // If x is Not a Number or less than one or greater than 10
    if (!isValidZip.test(x)) {
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

【讨论】：

【解决方案3】：

将其转换为数字

x = Number(document.getElementById("numb").value);

【讨论】：