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]等值保存在变量中也是一种很好的做法。它会有所帮助。

所以，检查小提琴，如果有什么你仍然不明白，请问。

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

2 个答案: