时间戳

首页 > 解决方案 > 动态校验值并显示报警弹窗

javascript - 动态校验值并显示报警弹窗

问题描述

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

标签： javascriptdjangovalidation

解决方案

一般来说，使用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>

推荐阅读