在提交和调用servlet之前调用javascript验证函数答案

【问题标题】：Calling javascript validation function before submiting and calling servlet在提交和调用servlet之前调用javascript验证函数
【发布时间】：2014-12-11 15:35:39
【问题描述】：

我正在尝试验证表单，然后调用 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>

【问题讨论】：

标签： java javascript servlets

【解决方案1】：

如下改变你的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
    }
}

另外，像这样在函数调用中传递提交事件，

<form name="loginform" action="login" method="post" onSubmit="return validateForm(event);">

Crowder 提供的方法很好，但如果验证失败，您可能还必须处理提交事件。

DEMO FIDDLE

【讨论】：

还是同样的问题。验证后将我重定向到 servlet。
你检查过小提琴吗？
这行得通！阻止提交通过允许您在提交之前验证由 servlet 驱动的表单来提供价值。提交后，servlet 通过 RequestDispatcher 接管 uri 重定向，然后您无法控制验证
@rnyunja，你是对的，这就是为什么 preventDefault 很有用，并且只有在客户端验证被清除时才会提交表单。但是我们不应该完全依赖于客户端验证。 ;)

【解决方案2】：

您使用document.frm 来引用您的表单，但您的表单名称是loginform，而不是frm。因此，如果您想依赖自动创建的 document 属性，则需要 document.loginform。

我不想依赖它们。相反，您可以将表单引用传递给您的验证函数：

<form ... onSubmit="return validateForm(this);" ...>

...然后在你的函数中使用参数：

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;
    }
}

（当然，我仍然依赖自动属性，在这种情况下是在表单对象上。如果我想真的避免它们，我可以在用户名字段中使用frm.querySelector("[name=username]")和 frm.querySelector("[name=password]") 用于密码字段。所有现代浏览器和 IE8 都有 querySelector。但至少只依赖表单上的那些比担心会被倾倒在 document 上的所有内容要包含更多内容。）

这是您的表单和上面在 sn-p 中的代码，修改了操作以将您带到 google.com（以及修改为 GET 的方法；这两个模块都是用于demo)：用空白的用户名或密码试试，你会注意到表单没有提交：

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>

【讨论】：

即将给出相同的答案。但是现在不想重复答案。他调用表格的方式是错误的。好收获
T.J.克劳德非常感谢您的帮助！这几乎就是我想要的，但还有一个问题需要处理。当我将用户名留空时，我收到一条消息，因此它正在验证，但之后将调用留空的用户名文本框 servlet。你能帮我解决这个问题吗？
@user3607625：不应该，而不是您显示的代码。我添加了一个 sn-p 来演示。