javascript - 我如何验证来自 html5 数据列表的输入？

Question

我想知道如何验证来自 Datalist 的输入值。我的意思是，如果我有一个 Datalist，用户可以在其中开始写入一个值，然后从 Datalist 中选择它，但用户决定不选择任何值如果他从列表中提交了不完整的值，则发送的值将是错误的。

我考虑过遍历 Datalist 的所有元素，但我认为如果 Datalist 有超过 1.000 个值并且我认为这不是一个好主意不知道任何其他方法来验证它。

这是我将要使用的 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>

Answer 1

试试这个:

<input type="text" list="colours" id='txt'>

在表单提交上你可以检查:

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