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

【问题标题】：Javascript form validation, how do I enable a button and check details (more details inside)Javascript 表单验证，如何启用按钮并检查详细信息（内部有更多详细信息）
【发布时间】：2013-05-08 03:38:03
【问题描述】：

好的，这就是我的验证工作方式

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

Onchange 每个都运行一个函数来验证它们并将计数器加 1。

函数是：email(), name(), message().

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

在我拥有的每个功能电子邮件、消息、姓名中 {counter++, CheckBut()}

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

当他们输入消息时，他们无法点击按钮，因为它已禁用并且验证消息字段的功能不会运行，直到他们点击其他地方。我该如何解决这个问题？我在考虑 BLUR() 但我不知道如何运行使其在我的表单范围内工作。

【问题讨论】：

也许你可以通过mousemove进行文本验证？或通过悬停按钮进行验证。在我看来可能

标签： javascript validation

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果字段在过去 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

【讨论】：

修复从 onchange 到 onkeypress 的事件，但也可以添加 onchange（用户可以在上下文菜单上输入文本）

【解决方案3】：

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

【讨论】：