动态检查值并显示警报弹出窗口

Question

我想验证用户输入，因此他只提供特定范围内的数字，步长为 0.5。但我希望我的网站在每次用户切换到另一个输入表单时执行此操作，而不是在他将数据发送到我的视图后执行此操作。你能提示一下应该如何做吗？我不懂Javascript，但我知道有onfocusoutDOM事件。使用它，检查值是否有效并据此显示警报的方法是否正确？

Answer 1

一般情况下使用是没有问题的onfocusevent。以下是有关如何执行此操作的提示：创建输入字段添加onfocusout事件处理程序并为其分配 JavaScript 函数定义负责验证过程的 JavaScript 函数（即我们在步骤 2 中讨论的同一函数）该函数获取字段内的值并进行比较，如果它不在您想要的范围内，那么您可以显示警报或类似的内容。我制作了一个演示，它不涉及警告用户，而是在您绝望地访问它时用绿色或红色将边框着色：<input type="number" id="field1" onfocusout="validateField(0, 100, 'field1')"/><br/><br/>&nbsp; &nbsp; <input type="number" id="field2" onfocusout="validateField(200, 300, 'field2')"/><br/><br/>&nbsp; &nbsp; <input type="number" id="field3" onfocusout="validateField(400, 500, 'field3')"/><br/><br/>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; function validateField(min, max, id) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const value = document.getElementById(id).value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (value < min || value > max) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(id).style.borderColor = "red";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(id).style.borderColor = "lime";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script>