如何验证html5 Datalist的输入?

时间:2014-07-24 13:10:09

标签: javascript jquery html5 html-datalist

我想知道如何验证来自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>

4 个答案:

答案 0 :(得分:8)

试试这个:

<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

答案 1 :(得分:1)

如果您使用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

答案 2 :(得分:0)

我只想在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>

答案 3 :(得分:0)

您可以使用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;
}