为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

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

1 回答

?
互换的青春

TA贡献1797条经验 获得超6个赞

一般情况下使用是没有问题的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>


查看完整回答
反对 回复 2023-09-21
  • 1 回答
  • 0 关注
  • 69 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信