无法将表单提交按钮重新设置为禁用

Question

在网页上我有一个表单：

<form action="/SignUp.py" method="post">
    <input required type="text" name="fullName" onKeyPress="checkFinished()" autofocus>
    <input type="submit" name="submitButton" value="Sign Up" disabled>
</form>

和脚本：

<script>
    function checkFinished() {
        if (document.getElementsByName("fullName")[0].value.match(/. ./).length > 0) {
            document.getElementsByName("submitButton")[0].disabled = false;
        }
        else {
            document.getElementsByName("submitButton")[0].disabled = true;
        }
    }
</script>

如果我使用 Firebug 单步执行代码，我可以看到执行路径是正确的。但是，当代码遇到 else 子句并且应该（重新）禁用 submitButton 时，它不会被禁用。我在这里做错了什么？

Answer 1

您的正则表达式执行以下操作：

/. ./

• 匹配任何字符（换行符除外）
• 字面匹配字符
• 匹配任何字符（换行符除外）

match 方法返回一个带有结果的数组，否则返回null。

如果没有匹配项，您的程序会抛出错误，因为 null 没有 length 属性。因此该函数会引发异常，并且脚本标记中的其余程序不会运行。

一种解决方案是使用返回布尔值的test 方法。

/. ./.test(document.getElementsByName("fullName")[0].value)

JSFiddle 演示：http://jsfiddle.net/vbgp6gba/2/

Answer 2

我做了一个小小提琴给你看看

https://jsfiddle.net/mo5wfjLt/2/

你的代码有什么问题：

首先，退格键不会触发keypress 事件，所以如果你想删除字符，你会遇到问题。请改用keyup。如果你想试验关键事件，试试这个：http://www.asquare.net/javascript/tests/KeyCode.html

下一个主要错误是这一行

document.getElementsByName("fullName")[0].value.match(/. ./).length

如果document.getElementsByName("fullName")[0].value.match(/. ./) 不存在，则返回null，因此当您立即尝试访问.length 时，您正在尝试执行null.length，因此您会得到Uncaught TypeError: Cannot read property 'length' of null

此外，将诸如document.getElementsByName("fullName")[0] 之类的值保存在变量中也是一个好习惯。有帮助。

所以，检查一下小提琴，如果还有什么你不明白的地方，问。