如何验证html5 Datalist的输入？

Question

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

我想过迭代Datalist的所有元素，但我认为如果Datalist有超过1000个值并且我不知道任何其他方式来验证它，这不是一个好主意。

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

Answer 2

如果你使用jQuery find方法，它会遍历DOM树，试图找到正确的元素，考虑到它的一个属性的值，并查看你的评论，我认为你关注性能。

关于迭代所有选项并检查value属性的第一个想法是更好（谈论性能），而不是遍历DOM树，寻找在其属性之一（look at this comparison）中具有特定值的元素。您需要注意，较短的代码与较快的代码不同。

更快的解决方案是在开头生成一个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
}

另一个更快的解决方案是在开始时生成object并将其用作hash map，在验证过程中检查其中的正确值：

//---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
}

在这里你有measurethat比较的四种方法：

1 - 你的第一个想法（迭代所有Datalist选项）

2 - 使用jQuery查找方法（@nsthethunderbolt解决方案）

3 - 在开头创建array的strings并在验证过程中搜索Array中的值

4 - 在开头创建哈希映射，并在验证过程中检查值是否为true

https://www.measurethat.net/Benchmarks/Show/4430/0/search-an-option-inside-a-datalist

Answer 3

我想在Js中分享一个非jquery替代方案：

HTML：

<form onsubmit="return doValidate();">
<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>Send</button>
</form>

使用Javascript：

 /* generic function to validate any datalist field */
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");
                return true;//send form
            }
            else{
                alert("Invalid");
                return false;//do not send
            }
        }

例：

    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>