javascript - 如何防止用户在html中提交数据列表的错误值?
问题描述
我有 Datalist 的代码:
$('input[list]').on('input', function(e) {
var $input = $(e.target),
$options = $('#' + $input.attr('list') + ' option'),
$hiddenInput = $('#' + $input.attr('id') + '-hidden'),
label = $input.val();
$hiddenInput.val(label);
for (var i = 0; i < $options.length; i++) {
var $option = $options.eq(i);
if ($option.text() === label) {
$hiddenInput.val($option.attr('data-value'));
break;
}
}
});
// For debugging purposes
$("#myForm").on('submit', function(e) {
$('#result').html($('#answer-hidden').val());
e.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form id="myForm">
<input list="answers" id="answer">
<datalist id="answers">
<option data-value="42">The answer</option>
<option data-value="1337">Elite</option>
<option data-value="69">Dirty</option>
<option data-value="3">Pi</option>
</datalist>
<input type="hidden" name="answer" id="answer-hidden">
<input type="submit">
</form>
<p>Submitted value (for debugging):</p>
<pre id="result"></pre>
我搜索Elite as El并选择选项Elite并按提交按钮,结果是1337。好的
但是,当我搜索Elite as El并按提交按钮(不选择选项Elite或任何其他...)时,结果是El。不好。
如何防止用户提交虚假值?
解决方案
正如@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;
});
并将您的提交按钮更改为:
<input id="submitButton" disbaled type="submit">
虽然,我不建议将您的数据值硬编码到 html 中,然后将它们复制到 javascript 文件中(即变量validValues
)。我建议使用可以帮助您的库,例如KnockOut 。
推荐阅读
- azure - Azure 功能应用程序与 vnet 的集成不起作用
- scala - 无形记录类型可以用作 Poly1 吗?
- generative-adversarial-network - 增加 WGAN 网络中的 image_size
- django - Heroku:gunicorn 和 waitress-serve 命令不起作用
- javascript - 如何用openlayers找到三点之间的角度?
- php - 在 PDO 中合并两个 MySQL 表并创建 CSV 输出
- pytorch - pytorch如何实现从输出层到输入层的反向传播
- ios - 如何寻找到 AVPlayer 的最后一帧
- c++ - 是否可以在 C++ 中声明两个变量 For-Each 循环?
- google-sheets - 如何对列中的最后 x 行求和?谷歌表格