JavaScript 表单验证在提交时不起作用

Question

我正在阅读一本关于使用 JavaScript 进行表单验证的书的一部分。 不幸的是，书中的例子不起作用。 我理解并遵循验证背后的逻辑（总体思路是，如果任何单个字段验证函数向验证函数返回一个值，则将显示警报并且不会在onSubmit提交表单），但 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>

Answer 1

提交时什么都没有发生

假设您确实意味着什么都没有发生，并且包括“正在提交的表单”，那么问题是可以通过使 HTML有效来解决的问题。

表单不能环绕表格行并位于这些行所属的表格内。 一些浏览器从此错误中恢复，我将表单移到表格之后（但将输入留在表格内）。 这意味着输入不在表单内并且无所事事。

作为快速修复，移动表单使其围绕桌子。

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

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

Answer 2

这里有一个提示......你怎么拼写“isNAN”？

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

Answer 3

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

JavaScript 表单验证在提交时不起作用

问题描述

3 个解决方案

解决方案1
4 2011-10-24 06:13:14

解决方案2
2 2011-10-24 06:13:29

解决方案3
1 2011-10-24 06:12:58

JavaScript 表单验证在提交时不起作用

问题描述

3 个解决方案

解决方案1 4 2011-10-24 06:13:14

解决方案2 2 2011-10-24 06:13:29

解决方案3 1 2011-10-24 06:12:58

解决方案1
4 2011-10-24 06:13:14

解决方案2
2 2011-10-24 06:13:29

解决方案3
1 2011-10-24 06:12:58