Javascript表单验证，我如何启用按钮和检查细节(更多细节在里面)

Javascript form validation, how do I enable a button and check details (more details inside)

本文关键字：细节 在里面 按钮 检查 验证 表单 Javascript 何启用 启用      更新时间：2023-09-26

我的验证是这样的

有三个文本框。name | email | message.

Onchange运行一个函数对它们进行验证，并给计数器加1。

函数有: email(), name(), message().

我有另一个名为CheckBut的函数，它通过确保计数器===3来检查每个文本框是否已被验证。然后启用发送按钮。

{counter++, CheckBut()}

这里有问题: 用户将正确输入名称，然后单击电子邮件字段。然后，这将运行名称的验证代码。然后输入电子邮件并单击消息字段，这将运行电子邮件字段的验证代码。

当他们输入消息时，他们不能点击按钮，因为它的被禁用和验证消息字段的函数不会运行，直到他们点击其他地方。我该如何解决这个问题?我在想BLUR()，但我不知道如何运行，使它在我的形式范围内工作

我建议您将侦听器连接到onKeyUp而不是onChange。这将使它们在用户单击文本字段之前运行，从而确保在用户尝试单击发送按钮之前启用它。

然而，通过监听onKeyUp，您的验证函数将被执行许多次，并且在用户离开name字段之前，您的counter可能会增长到大于3。为了解决这个问题，我建议您删除counter变量，而是使用三个单独的布尔变量(例如，isNameValid, isEmailValid, isMessageValid)跟踪每个值的有效性。每个验证函数只需将true或false赋值给各自的变量。然后将CheckBut()更改为简单地检查所有三个变量是否为真。

您可以使用onkeypress事件检查字段更改，如果字段在最近3-5秒内没有更改，则使用setTimeout进行运行验证。是这样的

<script>
    var validNameTimer = null;
    function nameValidWait() {
        if (validNameTimer != null) {
            clearTimeout(validNameTimer);
        }
        validNameTimer = setTimeout(nameValid, 4000);
    }
</script>
<input id="name" onkeypress="nameValidWait()" />
<<h3>修复/h3>

将onchange替换为onkeypress

您可能不应该禁用该按钮。相反，在按钮单击事件上运行所有3个验证，如果验证失败，则显示错误消息(可选)并停止执行(返回)。错误信息可以在HTML元素中显示，也可以使用alert(msg)函数。希望这对你有帮助。Best rgds, AB

相关文章：