Fatal编程技术网
  • javascript/
  • JavaScript表单验证在Submit上不起作用

JavaScript表单验证在Submit上不起作用

javascript forms validation

JavaScript表单验证在Submit上不起作用,javascript,forms,validation,Javascript,Forms,Validation,我正在阅读一本关于JavaScript表单验证的书的一部分。不幸的是，书中的例子不起作用。我理解并遵循验证背后的逻辑（一般的想法是，如果任何单个字段验证函数向验证函数返回一个值，则会显示一个警报，并且表单不会在提交时提交），但在提交时不会发生任何事情。我已经查看了脚本和html几次，没有发现任何错误（我甚至去了图书网站，从那里复制了代码） 以下是html表单和JavaScript验证： <script> function validate(form) {

我正在阅读一本关于JavaScript表单验证的书的一部分。不幸的是，书中的例子不起作用。我理解并遵循验证背后的逻辑（一般的想法是，如果任何单个字段验证函数向验证函数返回一个值，则会显示一个警报，并且表单不会在提交时提交），但在提交时不会发生任何事情。我已经查看了脚本和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>


函数验证（表单）
{
fail=validateForename（form.forename.value）
fail+=validateSurname（form.namite.value）
fail+=validateUsername（form.username.value）
fail+=validatePassword（form.password.value）
fail+=validateAge（form.age.value）
fail+=validateEmail（form.email.value）
如果（fail==“”）返回true
else{alert（fail）；return false}
}
函数验证重命名（字段）{
如果（字段==“”）返回“未输入名字。\n”
返回“”
}
函数validateSurname（字段）{
如果（字段==“”）返回“未输入姓氏。\n”
返回“”
}
函数validateUsername（字段）{
如果（字段==“”）返回“未输入用户名。\n”
else if（field.length<5）返回“用户名必须至少包含5个字符。\n”
else if（/[^a-zA-Z0-9_-]/.test（field））返回“用户名中只允许a-z、a-z、0-9和uu.”
返回“”
}
函数validatePassword（字段）{
如果（字段==“”）返回“未输入密码。\n”
else if（field.length<6）返回“密码必须至少为6个字符。\n”
否则如果（！/[a-z]/.test（field）| |！/[a-z]/.test（field）| |！/[0-9]/.test（field））返回“密码要求a-z、a-z和0-9各一个。\n”
返回“”
}
功能验证（字段）{
if（isNAN（字段））返回“未输入年龄。\n”
else if（字段<18 | |字段>110）返回“年龄必须在18到110之间。\n”
返回“”
}
函数validateEmail（字段）{
如果（字段==“”）返回“未输入电子邮件。\n”
否则如果（！（（field.indexOf（“.”>0）和（field.indexOf（“@”）>0））| |/[^a-zA-Z0-9.@-]/.test（field））返回“电子邮件地址无效。\n”
返回“”
}
报名表
名字
姓
用户名
暗语
年龄
电子邮件
用
isNAN
替换
isNAN
，它应该可以工作

没有任何事情发生

假设你真的是说什么都没有发生，包括“正在提交的表单”，那么问题是可以通过制作HTML来解决的

表单不能环绕表行，也不能位于这些行所属的表内。有些浏览器会从这个错误中恢复，将表单移动到表的后面（但将输入留在表中）。这意味着输入不在表单中，无所事事

作为一种快速修复方法，移动表单，使其环绕桌子

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

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

这里有一个提示。。“isNAN”怎么拼

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

这一切都是正确的，但与手头的bug有关。@Matthew-我回答的前两段解释了为什么它是相关的。@Quentin-改变HTML的布局永远不会解决问题。浏览器处理无效的布局，它们不处理未知的JavaScript函数调用。@Mathew-一些浏览器通过将表单（但不是其内容）移到表外来处理表单作为表行父级的特殊情况。那将打破它。可能会有其他问题，但这是一个真正的问题。打开控制台比在每条语句后添加警报更容易调试，但无论如何+1。如果可以的话，我会用+0.5来鼓励提醒：p非常感谢你的帮助。在发布之前，我真的应该在调试控制台中查看一下。不知道我怎么会错过那个问题。不管怎样，谢谢大家的意见。