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

Question

我想验证用户输入，这样他只提供0.5步的特定范围内的数字。但我希望我的网站每次用户切换到另一个输入表单时都这样做，而不是在他将数据发送到我的视图之后。你能提示一下该怎么做吗？我不知道Javascript，但我知道有onfocusoutDOM事件。使用它、检查值是否有效并在此基础上显示警报的方法是否正确？

Answer 1

一般来说，使用onfocusevent没有问题。

这里有一个关于如何做到这一点的提示：

• 创建输入字段
• 添加onfocusout事件处理程序并为其分配JavaScript函数
• 定义负责验证过程的JavaScript函数(与我们在步骤2中讨论的函数相同(
• 此函数获取字段内的值并进行比较，如果它不在您想要的范围内，则可以显示警报或类似的信息

我做了一个演示，它不需要提醒用户，而是用绿色或红色来标记边界，当你绝望时，请访问：

<input type="number" id="field1" onfocusout="validateField(0, 100, 'field1')"/><br/><br/>
<input type="number" id="field2" onfocusout="validateField(200, 300, 'field2')"/><br/><br/>
<input type="number" id="field3" onfocusout="validateField(400, 500, 'field3')"/><br/><br/>
<script>
function validateField(min, max, id) {
const value = document.getElementById(id).value;
if (value < min || value > max) {
document.getElementById(id).style.borderColor = "red";
}
else {
document.getElementById(id).style.borderColor = "lime";
}
}
</script>