8

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

5 回答 5

14

尝试这个：

<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
于 2014-07-24T14:41:34.110 回答
5

您可以使用 HTML5 验证来做到这一点pattern。如果您使用某种模板填充数据列表会更容易，但它看起来像这样（请注意，您需要额外的代码来处理验证 - 我只是添加了非常简单的 CSS 来显示验证状态）

值得注意的是，这会自动阻止表单提交，并为可访问性和其他符合标准的互操作性提供适当的语义。

input:valid {
  border: 1px solid green;
}
input:invalid {
  border: 1px solid red;
}
<input type="text" list="colours"
pattern="^(Red|Blue|Green|Black|White)$"
>

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

于 2020-11-04T18:44:24.037 回答
4

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

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>

于 2019-03-01T17:38:33.193 回答
2

如果您使用jQuery find方法，它会遍历DOM树并尝试找到正确的元素，同时考虑到其属性之一的值，并查看您的评论，我认为您担心性能。

关于迭代所有选项并检查 value 属性的第一个想法（谈到性能）比遍历DOM树在其属性之一中寻找具有特定值的元素更好（查看此比较）。您需要知道较短的代码与较快的代码不同。

更快的解决方案是在开始时生成一个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并将其用作哈希映射，在验证过程中检查其中的正确值：

//---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 - 使用jQueryfind 方法（@nsthethunderbolt 解决方案）

3 -在开头创建一个arrayof并在验证过程中搜索值stringsArray

4 - 在开始时创建一个哈希映射并检查该值是否true在验证过程中

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

于 2018-03-03T13:20:29.983 回答
0

为了澄清起见，我向您展示了一个工作示例，该示例初始化了一组选项：

const colours = [...document.querySelectorAll('#colours option')].map( option => option.value)

document.getElementById("colour").addEventListener("keyup", e => {
  if(colours.includes(e.target.value)) {
    document.querySelector('#colour').classList.remove('invalid')
    document.querySelector('#colour').classList.add('valid')
  }
  else {
    document.querySelector('#colour').classList.remove('valid')
    document.querySelector('#colour').classList.add('invalid')
  }
})
.valid {
  border: 3px solid green;
}
.invalid {
  border: 3px solid red;
}
<input id="colour" 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>

于 2022-01-07T23:52:27.553 回答