Javascript 如何防止用户在html中提交错误的datalist值？

我有一个Datalist的代码：

$（'input[list]'）。在（'input'，函数（e）上{
变量$input=$（即目标），
$options=$（“#”+$input.attr（'list'）+'option'），
$hiddenInput=$（“#”+$input.attr（'id'）+'-hidden'），
label=$input.val（）；
$hiddenInput.val（标签）；
对于（变量i=0；i<$options.length；i++）{
var$option=$options.eq（i）；
如果（$option.text（）==标签）{
$hiddenInput.val（$option.attr（'data-value'））；
打破
}
}
});
//用于调试目的
$（“#myForm”）。关于（'submit'，函数（e）{
$（“#结果”）.html（$（“#答案隐藏”）.val（）；
e、 预防默认值（）；
});

答案
精英
肮脏的
圆周率
提交值（用于调试）：

正如@ecg8所提到的，您的下拉列表中应该有一个事件侦听器，并且只有在选择了有效值时才启用“提交”按钮。这将对您有用：

var validValues = [42, 1337, 69, 3];
$("#answer").on("change", function() {
    var validValueSelected = validValues.some(x => x == $('#answer-hidden').val());
    document.getElementById("submitButton").disabled = !validValueSelected;
});

并将subimt按钮更改为：

<input id="submitButton" disbaled type="submit">



尽管如此，我不建议将数据值硬编码到html中，然后在javascript文件中复制它们（即变量
validValues
）。我建议使用这样的库，它可以帮助您。
无论您对此问题有何回答，请确保您正在服务器端验证此输入。用户始终可以绕过前端验证。默认情况下禁用提交，并在下拉列表中使用事件侦听器，仅当数据值正确时才启用提交。