布尔测试HTML文本框输入与数组值进行比较

Question

我正在尝试在网页上创建单个文本框表单，以布尔测试用户提交的输入。输入将是网站用户的邮政编码。我想制作一个预定的邮政编码数组，以便测试真实。

如果确实（输入的邮政编码包含在预定数组中），我想显示一位HTML，如果测试为false，我想显示另一位。

我四处搜索并查看了我的一些JavaScript书籍（我刚刚开始学习）并且没有找到答案;有人可以帮我解决这个问题吗？谢谢！

Answer 1

HTML：

<label id="input-label" class="invalid">
    ZIP code: <input id="zipcode" />
    <div class="valid-message">
        Valid
    </div>
    <div class="invalid-message">
        Invalid
    </div>
</label>

CSS：

#input-label.valid .valid-message { display: block; }
#input-label.valid .invalid-message { display: none; }

#input-label.invalid .valid-message { display: none; }
#input-label.invalid .invalid-message { display: block; }

的Javascript

function isValidZip(z) {
    return ['12345','67890'].indexOf(z) != -1;
}

var label = document.getElementById('input-label');
var input = document.getElementById('zipcode');

input.onkeydown = function() {
    label.className = isValidZip(input.value) ? "valid" : "invalid";
}

Answer 2

你可以尝试这样的事情（可能有点关闭我会仔细检查然后再回复你:)）：

var zipArr = ['98671','97006'];//insert the zip/post codes here
var userInputEl = document.getElementById('userInput');//Get the element could use tag names or it would be better actually if you used jQuery but yeah
var elToShow = document.getElementById('elementToShowIfNotFound');
var otherElToShow = document.getElementById('idOfOtherelementToShow');
var userInput = userInputEl.value();//might be .text()
if(zipArr.indexOf(userInput) === -1){//-1 means it isn't found in the array
    zipArr.push(userInput);//pushes the new one onto the array        
    elToShow.style.display = 'block';//this changes the css display to block instead of it being hidden.    
}else{        
    otherElToShow.style.display= 'block';
}

可能不是最好的方法，但我建议使用jQuery，这会让这个过程变得更容易。