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

Answer 2

如果您使用jQuery find方法，它会遍历DOM树，尝试找到正确的元素，并考虑其中一个属性的值，并查看您的评论，我认为你关心的是表现。

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

更快的解决方案是在开头生成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并将其用作look at this comparison，在验证过程中检查其中的正确值：

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

您可以在hash map中比较四种方法：

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

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

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

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

measurethat

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>

Answer 4

您可以使用Path archCSV = Paths.get(System.getProperty("user.dir"), "MYLAR.csv"); try (BufferedReader fileReader = Files.newBufferedReader(archCSV)) { // Skip HTTP Headers for (String line; (line = fileReader.readLine()) != null; ) if (line.isEmpty()) break; // Found end of HTTP Headers // Read CSV content try (CSVReader csvReader = new CSVReader(fileReader)) { String[] fila = null; while((fila = csvReader.readNext()) != null) { String col1 = fila[0]; String col2 = fila[1]; // Skip ("delete") column 3 String col4 = fila[3]; // code here } } }对HTML5进行验证。如果您使用某种模板填充数据列表会更容易，但是看起来像这样（请注意，您需要其他代码来处理验证-我只是添加了非常简单的CSS来显示验证状态）

pattern

input:valid {
  border: 1px solid green;
}
input:invalid {
  border: 1px solid red;
}

如何验证html5 Datalist的输入？

4 个答案: