Question

我正在尝试验证表单，然后调用一个servlet并且它失败了，因为表单没有validete。我＆＃39;在下面粘贴了一些代码。你能给我一些提示并帮助解决这个问题吗？

＆＃13;

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

＆＃13;

<%@ 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>

＆＃13;

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

另外，在函数调用中传递submit事件，如下所示，

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

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

DEMO FIDDLE

Answer 2

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

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

<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上。）

以下是您的表单以及上面的代码片段，其中的操作已修改为将您带到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>

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

2 个答案: