JavaScript 表单验证不起作用提交答案

【问题标题】：JavaScript Form Validation Not Working onSubmitJavaScript 表单验证不起作用提交
【发布时间】：2020-08-22 02:33:22
【问题描述】：

我正在阅读一本书中关于使用 JavaScript 进行表单验证的部分。不幸的是，书中的例子不起作用。我理解并遵循验证背后的逻辑（一般的想法是，如果任何单个字段验证函数向验证函数返回值，则会显示警报并且不会提交表单onSubmit），但什么都不是发生在提交上。我已经查看了脚本和 html 几次，没有发现任何错误（我什至去了图书网站并从那里复制了代码）。

这里是 html 表单和 JavaScript 验证：

    <script>
    function validate(form) 
    {
            fail  = validateForename(form.forename.value)
            fail += validateSurname(form.surname.value)
            fail += validateUsername(form.username.value)
            fail += validatePassword(form.password.value)
            fail += validateAge(form.age.value)
            fail += validateEmail(form.email.value)
            if (fail == "") return true
            else {alert(fail); return false }
    }
    </script>

    <script>
    function validateForename(field) {
            if (field == "") return "No Forename was entered.\n"
            return ""
    }

    function validateSurname(field) {
            if (field == "") return "No Surname was entered.\n"
            return ""
    }

    function validateUsername(field) {
            if (field == "") return "No Username was entered.\n"
            else if (field.length < 5) return "Usernames must be at least 5 characters.\n"
            else if (/[^a-zA-Z0-9_-]/.test(field)) return "Only a-z, A-Z, 0-9, - and _ allowed in Usernames.\n"
            return ""
    }

    function validatePassword(field) {
            if (field == "") return "No Password was entered.\n"
            else if (field.length < 6) return "Passwords must be at least 6 characters.\n"
            else if (! /[a-z]/.test(field) || ! /[A-Z]/.test(field) || ! /[0-9]/.test(field)) return "Passwords require one each of a-z, A-Z and 0-9.\n"
            return ""
    }

    function validateAge(field) {
            if (isNAN(field)) return "No Age was entered.\n"
            else if (field < 18 || field > 110) return "Age must be between 18 and 110.\n"
            return ""
    }

    function validateEmail(field) {
            if (field == "") return "No Email was entered.\n"
                    else if (!((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[^a-zA-Z0-9.@_-]/.test(field)) return "The Email address is invalid.\n"
            return ""
    }
    </script>

</head>

<body>

    <table class="signup" border="0" cellpadding="2" cellspacing="5" bgcolor="#eeeeee">
    <th colspan="2" align="center">Signup Form</th>
    <form method="post" action="adduser.php" onSubmit="return validate(this)">
    <tr><td>Forename</td><td><input type="text" maxlength="32" name="forename" /></td>
    </tr><tr><td>Surname</td><td><input type="text" maxlength="32" name="surname" /></td>
    </tr><tr><td>Username</td><td><input type="text" maxlength="16" name="username" /></td>
    </tr><tr><td>Password</td><td><input type="text" maxlength="12" name="password" /></td>
    </tr><tr><td>Age</td><td><input type="text" maxlength="3" name="age" /></td>
    </tr><tr><td>Email</td><td><input type="text" maxlength="64" name="email" /></td>
    </tr><tr><td colspan="2" align="center">
    <input type="submit" value="Signup" /></td>
    </tr></form></table>
</body>
</html>

【问题讨论】：

标签： javascript forms validation

【解决方案1】：

提交时什么都没有发生

假设您确实表示什么都没有发生，其中包括“正在提交的表单”，那么问题是可以通过制作 HTML valid 来解决的。

表单不能被包裹在表格行周围并且在这些行所属的表格内。一些浏览器会从这个错误中恢复，我将表单移动到表格之后（但将输入留在表格内）。这意味着输入不在表单内，并且无所事事。

作为一种快速解决方法，移动表格使其围绕表格。

作为一个适当的解决方案，停止使用表格进行布局。 CSS 是 form layout 的好工具。

您还应该利用the label element，而不是用全局变量填充您的 JS。

【讨论】：

这都是有效的，但与手头的错误有关。
@Matthew — 我回答的前两段解释了为什么它是相关的。
@Quentin - 更改 HTML 的布局永远无法解决问题。浏览器处理无效布局，它们不处理未知的 JavaScript 函数调用。
@Mathew — 一些浏览器通过将表单（而不是其内容）移到表外来处理作为表行父级的表单的特殊情况。那会打破它。可能存在其他问题，但这是一个真实的问题。

【解决方案2】：

这里有一个提示..你如何拼写“isNAN”？

通过在每行代码后放置警告语句，可以轻松调试此代码。如果你像这样使用简单的调试，你会发现你有一些无效的语法。我把它留给你找到错误！

【讨论】：

打开控制台比在每条语句后发出警报更容易调试，但无论如何+1。如果可以的话，我会做 +0.5 来鼓励警报：p
非常感谢您的帮助。在发布之前，我真的应该在调试控制台中看看这个。不知道我是如何错过那个 NaN 问题的。不管怎样，感谢大家的意见。

【解决方案3】：

将isNAN 替换为isNaN，它应该可以工作。

【讨论】：