Question

我正在编写一本关于使用JavaScript进行表单验证的书的一部分。不幸的是，书中的例子不起作用。我理解并遵循验证背后的逻辑（一般的想法是，如果任何单独的字段验证函数向validate函数返回一个值，那么将显示一个警告，表单将不会被提交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 valid来解决的问题。

表格无法围绕表格行和包含在这些行所属的表格内。有些浏览器从这个错误中恢复我将表单移动到表之后（但将输入留在表中）。这意味着输入不在表单内部，并且无所事事。

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

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

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

Answer 2

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

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

Answer 3

将isNAN替换为isNaN，它应该有效。

JavaScript表单验证不工作onSubmit

3 个答案: