我如何使用两种方法，一种来自 Java Servlet，另一种来自输入按钮上的 js 文件答案

【问题标题】：How can i make use of two methods, one from Java Servlet and other from js file on Input button我如何使用两种方法，一种来自 Java Servlet，另一种来自输入按钮上的 js 文件
【发布时间】：2023-03-03 00:57:01
【问题描述】：

您好，我有一个 Java Servlet“AddEmployeeServlet”，每当单击我的按钮时都会调用它，因此我们可以说该按钮是将表单的所有字段值提交给 servlet 的按钮。

但是我想使用这个按钮来实现一个 JavaScript 方法，该方法在将值提交给 servlet 之前验证所有表单字段都不为空。但我不知道如何实现这一点，似乎没有调用 JS 方法，并且空信息未经任何验证就进入 servlet。如有任何建议，我将不胜感激。

我的 JSP：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
 <head>
 <style><%@include file="/css/addEmployeeStyle2.css"%></style>
 <meta http-equiv="Content-Type"
    content="text/html; charset=UTF-8">
 <title> Add Employee Form</title>
 </head>
 <body>
<h1 class = "h1-title">ADD EMPLOYEE</h1>
 <hr class = "hr-line"> 
 <div class = "wrapper">
 <form class = "form" action="AddEmployeeServlet" method="post">
 <script type="text/javascript" src="js/addEmployeeScripts.js"></script>
 <input type="text" name="emp_id" placeholder = "ID"class = "input" 
 onkeypress="return isNumber(event)">
 <div id= "error" class="alert-danger" ${loginError eq 1 ? '' : 'hidden'} role="alert">
 <h4>Complete this field please</h4>
 </div>
<input type="text" name="emp_name" placeholder="Name" class="input" onkeypress="return (event.charCode > 64 && 
event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)">
<input type="text" name="emp_email" placeholder = "Email" class = "input">
 <input type="text" name="emp_phone" placeholder ="Phone" class = "input"
  onkeypress = "return event.charCode > 47 && event.charCode < 58">
 <input class = "btn" type="submit" value="ADD" onsubmit="return voidFieldsValidator()">
 </form>
 </div>
 </body>
 <a class = "home-link" href="index.jsp"> Employee APP </a>
</html>

来自 JS 文件的我的 JavaScript 方法：

function voidFieldsValidator() {
    var flag = true;
    var formFields = [document.getElementsByName("emp_id").value, document.getElementsByName("emp_name").value,
    document.getElementsByName("emp_email").value,  document.getElementsByName("emp_phone").value]
    for(i = 0; i < formFields.length; i++) {
        if(formFields[i] === "") {
            console.log(formFiels[i].value)
            flag = false;
        }
    }
    return flag;
}

我对这种网络项目真的很陌生，我不知道我调用 servlet 方法是否干扰了我的按钮的“onclick ...”属性。我不认为我调用 js 方法的方式是错误的，因为我已经从不同的输入（emp_id ）调用了另一个方法并且它工作正常。

【问题讨论】：

标签： javascript java html jsp methods

【解决方案1】：

您需要将onsubmit 放在您的form 标记中，这样当您单击提交按钮时会调用它，如果标志返回为true，则表单将提交，否则将不会提交。另外，正如您所拥有的那样使用 getElementsByName 这将返回您的 Nodelist 同名集合，以便访问您需要指定索引的任何元素，即：0,1.etc。

演示代码：

function voidFieldsValidator() {
  var flag = true;
  //use [0] to get first element with that name
  var formFields = [document.getElementsByName("emp_id")[0].value, document.getElementsByName("emp_name")[0].value,
    document.getElementsByName("emp_email")[0].value, document.getElementsByName("emp_phone")[0].value
  ]
  for (i = 0; i < formFields.length; i++) {
    if (formFields[i] === "") {
      flag = false;
    }
    console.log(formFields[i])
  }
  return flag;
}

<!--add onsubmit here-->
<form class="form" action="AddEmployeeServlet" method="post" onsubmit="return voidFieldsValidator()">
  <script type="text/javascript" src="js/addEmployeeScripts.js"></script>
  <input type="text" name="emp_id" placeholder="ID" class="input" onkeypress="return isNumber(event)">
  <div id="error" class="alert-danger" ${loginError eq 1 ? '' : 'hidden'} role="alert">
    <h4>Complete this field please</h4>
  </div>
  <input type="text" name="emp_name" placeholder="Name" class="input" onkeypress="return (event.charCode > 64 && 
event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)">
  <input type="text" name="emp_email" placeholder="Email" class="input">
  <input type="text" name="emp_phone" placeholder="Phone" class="input" onkeypress="return event.charCode > 47 && event.charCode < 58">
  <input class="btn" type="submit" value="ADD">
</form>

【讨论】：

你好@Swati，你总是这么救我，好吧，我在我的表单标签中实现了“onsubmit:...”，但是如果某些字段为空，我的程序仍在调用 servlet。在我的 Servlet 中，给了我从“”到整数的 formatException。这是正确的方法吗？还是我必须在js方法中调用servlet？
如果您没有填写输入，请再次尝试上面的代码，然后表单将不会提交（不会发生重定向）并根据该代码进行更改。还要检查js 代码，我也在那里做了一些更改。
你说的很对，我没有意识到 getElementsByName 返回一个数组，所以我使用的是某种列表的值，而不是元素本身。再次感谢@Swati