Javascript 使用jquery和datalist进行验证

我也有类似的问题，比如这篇文章：

然而，FelDev的答案是JavaScript，我需要它在jquery中。 我是jquery新手，因此如果有人能帮上忙的话，这将是非常有帮助的

以下是费尔德夫的回答：

让btn=document.getElementById（“btnSend”）；
让form=document.getElementById（“zeForm”）；
让输入=document.getElementById（“zeInput”）；
让msg=document.getElementById（“msg”）；
让allowedValues=[“atown”、“btown”、“ctown”]；//与数据列表中的选项值相同
btn.onclick=函数（）{
让一切美好=虚假；
allowedValues.forEach（函数（elm）{
if（elm==input.value）{
一切都好=正确；
返回；
}
})
如果（一切正常）{
msg.innerHTML=“成功！！”；
msg.style.color=“绿色”；
//表单提交（）；
}否则{
msg.innerHTML=“不接受此值”；
msg.style.color=“红色”；
}
msg.style.display=“inline”；
}

#msg{
显示：无；
}
#btnSend{
显示：块；
页边顶部：1rem；
}

阿托恩
B镇
克敦

发送

那么您需要翻译吗

所以这个js的jquery是：

let btn = $("#btnSend");
let form = $("#zeForm");
let input = $("#zeInput");
let msg = $("#msg");
let allowedValues = ["atown", "btown", "ctown"]; // same values as the options in your datalist


btn.on('click' , function() {
    let allGood = false;

    allowedValues.each(function(index, element) {
        if (element === input.value) {
            allGood = true;
            return;
        }
    })

    if (allGood) {
        msg.text("Success!!");
        msg.attr('style',"color:green");
        //form.submit();
    } else {
         msg.text("This value is not accepted";
         msg.attr('style',"color:red");
    }
   msg.attr('style',"display:inline");

});

---

感谢您的回答，但是它不适用于示例代码，您现在知道为什么了吗？现在它什么都不做--，代码（在JavaSKcript之前），它会在输入旁边给出红色或绿色的消息，当它与DataLister中的词不匹配或不匹配时，您会导入html中的jquery吗？