javascript 在提交和调用servlet之前调用javascript验证函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26401516/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calling javascript validation function before submiting and calling servlet
提问by user3607625
I am trying to validate the form and after that calling a servlet and it fails because form doesn't validete. I' ve pasted some code below. Could you give me some tips and help with this issue?
我正在尝试验证表单，然后调用 servlet 并且它失败了，因为表单没有验证。我在下面粘贴了一些代码。你能给我一些提示并帮助解决这个问题吗？
function validateForm()
{
if(document.frm.username.value=="")
{
alert("User Name can not be left blank");
document.frm.username.focus();
return false;
}
else if(document.frm.pwd.value=="")
{
alert("Password can not be left blank");
document.frm.password.focus();
return false;
}
}<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="/LoginExample/css/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript" src="/LoginExample/js/validation.js"></script>
<title>Login example</title>
</head>
<body>
<form name="loginform" action="login" method="post" onSubmit="return validateForm();">
<p> Enter user name: <input type="text" name="username"><br>
Enter password: <input name="password" type="password"><br>
<input type="submit">
</p>
</form>
<a href="register.jsp"><input type="button" value="register" name="Sign in"></a>
</body>
</html>回答by VPK
Change your javascript function as follows,
如下更改您的 javascript 函数，
function validateForm(event)
{
event.preventDefault(); // this will prevent the submit event.
if(document.loginform.username.value=="")
{
alert("User Name can not be left blank");
document.loginform.username.focus();
return false;
}
else if(document.loginform.password.value=="")
{
alert("Password can not be left blank");
document.loginform.password.focus();
return false;
}
else {
document.loginform.submit();// fire submit event
}
}
Also, pass the submit event in the function call like this,
另外，像这样在函数调用中传递提交事件，
<form name="loginform" action="login" method="post" onSubmit="return validateForm(event);">
the approach provided by Crowder is good, but you might also have to handle the submit event being fired anyway if the validation fails.
Crowder 提供的方法很好，但是如果验证失败，您可能还必须处理无论如何都会触发的提交事件。
回答by T.J. Crowder
You're using document.frmto refer to your form, but your form's name is loginform, not frm. So you want document.loginformif you want to rely on the automatically-created documentproperties.
您正在使用document.frm来指代您的表单，但您的表单名称是loginform，而不是frm。所以你想document.loginform依赖自动创建的document属性。
I prefer not to rely on them. Instead, you might pass the form reference into your validation function:
我宁愿不依赖他们。相反，您可以将表单引用传递到您的验证函数中：
<form ... onSubmit="return validateForm(this);" ...>
...and then use the argument in your function:
...然后在您的函数中使用参数：
function validateForm(frm)
{
if(frm.username.value=="")
{
alert("User Name can not be left blank");
frm.username.focus();
return false;
}
else if(frm.pwd.value=="")
{
alert("Password can not be left blank");
frm.password.focus();
return false;
}
}
(Of course, there I'm still relying on automatic properties, in this case on the form object. If I wanted to reallyavoid them, I could use frm.querySelector("[name=username]")for the username field and frm.querySelector("[name=password]")for the password field. All modern browsers, and IE8, have querySelector. But at least only relying on the ones on the form is a bit more contained than worrying about everything that gets dumped on document.)
（当然，我仍然依赖于自动属性，在这种情况下依赖于表单对象。如果我真的想避免它们，我可以使用frm.querySelector("[name=username]")用户名字段和frm.querySelector("[name=password]")密码字段。所有现代浏览器和 IE8，有querySelector。但至少只依赖表格上的内容比担心所有内容都被倾倒了更多document。）
Here's your form and the code above in a snippet, with the action modified to take you to google.com (and the method modified to GET; both of those mods are justfor the demo): Try it with a blank username or password, and you'll note that the form does not submit:
这是您的表单和上面的代码片段，修改了操作以将您带到 google.com（并将方法修改为 GET；这两个 mod仅用于演示）：使用空白用户名或密码尝试，你会注意到表单没有提交：
function validateForm(frm)
{
if(frm.username.value=="")
{
alert("User Name can not be left blank");
frm.username.focus();
return false;
}
else if(frm.pwd.value=="")
{
alert("Password can not be left blank");
frm.password.focus();
return false;
}
}<form name="loginform" action="http://google.com/search?q=kittens" method="get" onSubmit="return validateForm(this);">
<p> Enter user name: <input type="text" name="username"><br>
Enter password: <input name="password" type="password"><br>
<input type="submit">
</p>
</form>