Question

好的，我的验证工作原理

有三个文本框。 名称|电子邮件|消息。

每个人的

Onchange 运行一个验证它们的函数，并将1加到计数器上。

功能包括： email(), name(), message().

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

包含每个功能电子邮件，消息，姓名 {counter++, CheckBut()}

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

当他们输入消息时，他们无法点击该按钮，因为它的已禁用和该功能可以验证点击字段WONT，直到他们点击其他地方。我该如何解决这个问题？我在考虑BLUR（），但我不知道如何运行让它在我的形式范围内工作。

Answer 1

如果字段在最后3-5秒内未更改，则可以使用onkeypress事件进行检查字段更改，使用setTimeout进行运行验证。看起来像这样。

<script>
    var validNameTimer = null;
    function nameValidWait() {
        if (validNameTimer != null) {
            clearTimeout(validNameTimer);
        }
        validNameTimer = setTimeout(nameValid, 4000);
    }
</script>

<input id="name" onkeypress="nameValidWait()" />

修复

将onchage替换为onkeypress

Answer 2

我建议您将听众添加到onKeyUp而不是onChange。这将使用户在用户单击文本字段之前运行，这可确保在用户尝试单击它之前启用发送按钮。

然而，通过收听onKeyUp，您的验证功能将被执行多次，并且在用户甚至离开名称字段之前，您的counter可能会大于3。为解决此问题，我建议您删除counter变量，而是使用三个单独的布尔变量（例如isNameValid，isEmailValid，isMessageValid）跟踪每个值的有效性。每个验证函数只需将true或false分配给其各自的变量。然后将CheckBut()更改为仅检查所有三个变量是否为真。

Answer 3

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

Javascript表单验证，如何启用按钮并检查详细信息（内部更多详细信息）

3 个答案:

修复