Question

给出以下代码：

<%@ page language="java" 
    contentType="text/html; charset=windows-1256"
    pageEncoding="windows-1256"
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head><title>Bank application</title>
<link rel="stylesheet"
      href="./css/styles.css"
      type="text/css"/>
</head>

<body>
<table class="title">
  <tr><th>Web Bank application</th></tr>
</table>
<br/>


<script>

function verifyEmptyString()
{
  var username = document.forms["loginForm"]["username"].value;
  var password = document.forms["loginForm"]["password"].value;

  return !(username == null || username == "" || password == null || password == "");
}     
</script>


<fieldset>
  <legend>Login Page - please enter your Username and Password</legend>

  <form id="loginForm" action="loginPage" onsubmit="verifyEmptyString()" > 

    <p style="font-size:15px">  <span style="color:red;font-weight:bold;">*</span> Username: <input type="text" name="username"><br> </p>
    <p style="font-size:15px"><span style="color:red;font-weight:bold;">*</span>  Password : <input type="password" name="password"><br> </p>
    <input type="submit" value="Login">
  </form>
</fieldset>

<br/>
<br/>
<br/>
<br/>
<br/><br/><br/><br/><br/><br/>

</body></html>

我正在尝试调用JS函数verifyEmptyString()，但JSP不会调用该函数。

知道代码有什么问题吗？

Answer 1

正在调用该函数（我添加了一个警告来验证）。但是你想在onclick事件中返回函数的值：

<form id="loginForm" action="loginPage" onsubmit="return verifyEmptyString(this)" >

Answer 2

尝试这样的事情：http://jsfiddle.net/daguru/RBYnc/1/

var myForm = document.getElementById('loginForm');

myForm.addEventListener("submit", function(ev) {
    ev.preventDefault(); // to stop the form from submitting
    var username = document.forms["loginForm"]["username"].value;
    var password = document.forms["loginForm"]["password"].value;

    if(!(username == null || username == "" || password == null || password == "")){
        this.submit(); // If all the validations succeeded
        alert("submiting")
    }         
});

Answer 3

以下是解决方案：

<form onsubmit="return verifyEmptyString(this)" id="loginForm" action="loginPage"  >

对于将来可能遇到此问题的任何人，您需要更改onsubmit ...

由此：

onsubmit="verifyEmptyString()"

对此：

onsubmit="return verifyEmptyString(this)"

Answer 4

我不太明白为什么我们需要将this作为参数传递给函数，因为它在实际函数定义function verifyEmptyString()中不被接受。您直接引用函数内的表单元素。

另一方面，如果您的代码类似于以下场景，

<!DOCTYPE html>
<html>
<head>
<script>
    function validateForm(obj) {
        var x = obj["firstname"].value;
        alert(x);
        if (x == null || x == "") {
            alert("First name must be filled out");
            return false;
        }
    }
</script>
</head>

<body>
    <form name="myForm" action="action.jsp"
        onsubmit="return validateForm(this)" method="post">
        First name: <input type="text" name="firstname"> <input
            type="submit" value="Submit">
    </form>
</body>

</html>

在这种情况下，我们正在使用传递的参数this。它指的是当前的上下文，在我们的例子中，form的名称是myForm

但是在原始场景中，您通过调用document.forms["loginForm"]["username"].value直接引用javascript函数中的表单。

在JSP中嵌入JavaScript代码不会调用JS函数

4 个答案: