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

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 方法 returns 一个包含结果的数组，否则它 returns null。

当没有匹配项时，您的程序会抛出错误，因为 null 没有 length 属性。因此该函数抛出异常，脚本标记内的程序的其余部分不会运行.

一种解决方案是使用 test 方法，其中 returns 一个布尔值。

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

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

Answer 2

做了一点fiddle给大家看一下

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(/. ./) 不存在，则此 returns null，因此当您立即尝试访问 .length 时，您正在尝试做 null.length，所以你得到一个 Uncaught TypeError: Cannot read property 'length' of null

此外，将 document.getElementsByName("fullName")[0] 等值保存在变量中也是一种很好的做法。有帮助。

所以，检查一下fiddle，如果还有不明白的地方再问。

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

Cannot re-set form submit button to disabled

html

javascript

forms

disabled-control

submit-button