javascript 如何验证来自 html5 Datalist 的输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24934669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i validate the input from a html5 Datalist?
提问by abaracedo
I would like to know how I can validate the input value that comes from a Datalist. I mean, if I have a Datalistwhere the user can start to write a value and then choosing it from the Datalist, but the user decides to don't choose any value from the list and he submits the form with the incomplete value, the sent value will be wrong.
我想知道如何验证来自Datalist. 我的意思是，如果我有一个Datalist用户可以开始写入值然后从 中选择它的地方Datalist，但用户决定不从列表中选择任何值，并且他提交了带有不完整值的表单，即发送的值会出错。
I thought about iterate over all the elements of the Datalistbut I think that it can't be a good idea if the Datalisthas more than 1.000 values and I don't know any other way to validate it.
我考虑过迭代 的所有元素，Datalist但我认为如果Datalist具有超过 1.000 个值并且我不知道任何其他方法来验证它，这不是一个好主意。
Here is an example of the Datalistthat I'm going to use:
这是Datalist我将要使用的示例：
<input type="text" list="colours">
<datalist id="colours">
<option value="Red" data-id="1">
<option value="Blue" data-id="2">
<option value="Green" data-id="3">
<option value="Black" data-id="4">
<option value="White" data-id="5">
</datalist>
回答by nsthethunderbolt
Try this:
试试这个：
<input type="text" list="colours" id='txt'>
And on form submit you can check:
在表单提交时，您可以检查：
var val = $("#txt").val();
var obj = $("#colours").find("option[value='" + val + "']");
if(obj != null && obj.length > 0)
alert("valid"); // allow form submission
else
alert("invalid"); // don't allow form submission
回答by ElChiniNet
If you use jQueryfindmethod, it will traverse the DOMtree trying to find the correct element taking into account the value of one of its attributes, and looking at your comment, I think that you are concerned about performance.
如果你使用jQueryfind方法，它会遍历DOM树试图找到正确的元素，考虑到它的一个属性的值，看看你的评论，我认为你关心的是性能。
Your first idea about iterate over all the options and check the value property is better (speaking about performance) than traversing the DOMtree looking for an element with a particular value in one of their attributes (look at this comparison). You need to be aware that shorter codeis not the same as faster code.
您关于迭代所有选项并检查 value 属性的第一个想法（谈到性能）比遍历DOM树以查找其中一个属性中具有特定值的元素（查看此比较）更好。您需要注意较短的代码与较快的代码不同。
A faster solution is to generate an arrayof strings at the beginning and search the correct value inside it in the validation process:
一个更快的解决方案是array在开头生成一个字符串并在验证过程中搜索其中的正确值：
//---At the beginning of your application
let list = Array.prototype.map.call(document.getElementById("colours").options, (option) => option.value);
//---Later in your validation process
if (list.indexOf(value) < 0) {
//Invalid
}
Another faster solution is to generate an objectat the beginning and use it as a hash map, checking for the correct value inside it in the validation process:
另一个更快的解决方案是object在开头生成一个并将其用作哈希映射，在验证过程中检查其中的正确值：
//---At the beginning of your application
let hashmap = Array.prototype.reduce.call(document.getElementById("colours").options, (obj, option) => {
if (!obj[option.value]) { obj[option.value] = true; }
return obj;
}, {});
//---Later in your validation process
if (!hashmap[value]) {
//Invalid
}
Here you have the four methods compared in measurethat:
在这里，您在measurethat 中比较了四种方法：
1 - Your first idea (iterate over all the Datalistoptions)
1 - 你的第一个想法（迭代所有Datalist选项）
2 - Use the jQueryfind method (@nsthethunderbolt solution)
2 - 使用jQueryfind 方法（@nsthethunderbolt 解决方案）
3 - Create an arrayof stringsat the beginning and search the value in the Arrayin the validation process
3 -在开头创建一个arrayofstrings并Array在验证过程中搜索 the 中的值
4 - Create a hash map at the beginning and check if the value is truein the validation process
4 - 在开始时创建一个哈希映射并检查该值是否true在验证过程中
https://www.measurethat.net/Benchmarks/Show/4430/0/search-an-option-inside-a-datalist
https://www.measurethat.net/Benchmarks/Show/4430/0/search-an-option-inside-a-datalist
回答by ThiagoYB
I'd like to share a non-jquery alternative, only in Js:
我想分享一个非 jquery 替代方案，仅在 Js 中：
function is_valid_datalist_value(idDataList, inputValue) {
var option = document.querySelector("#" + idDataList + " option[value='" + inputValue + "']");
if (option != null) {
return option.value.length > 0;
}
return false;
}
function doValidate() {
if (is_valid_datalist_value('colours', document.getElementById('color').value)) {
alert("Valid");
} else {
alert("Invalid");
}
}<form onsubmit="return false">
<input type="text" id="color" list="colours">
<datalist id="colours">
<option value="Red" data-id="1" />
<option value="Blue" data-id="2" />
<option value="Green" data-id="3" />
<option value="Black" data-id="4" />
<option value="White" data-id="5" />
</datalist>
<button onclick="doValidate();">Send</button>
</form>