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