如何使用两种方法，一种来自Java Servlet，另一种来自Input按钮上的js文件

debugcn 发表于 Dev

小丑

您好，我有一个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;
}

在这种Web项目上，我真的很新，我不知道我调用servlet方法是否会干扰按钮的“ onclick ...”属性。我不认为即时通讯方式调用js方法是错误的，因为我已经从其他输入（emp_id一个）中调用了另一个，并且它可以正常工作。

斯瓦蒂

你需要把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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-5

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

如何使用两种方法，一种来自Java Servlet，另一种来自Input按钮上的js文件

如何使用两种方法，一种来自Java Servlet，另一种来自Input按钮上的js文件

如何在Java（android）中的另一种方法中使用一种方法的变量

在另一种方法中使用来自 onSensorChanged() 的值

如何从另一种方法使用数组？

如何从另一种方法使用数组？

工厂有两种方法，一种是带有$ promise的$ http方法-如何从第一种方法的成功函数中引用另一种方法？

工厂有两种方法，一种是带有$ promise的$ http方法-如何从第一种方法的成功函数中引用另一种方法？

如何在一种方法中重构两种相似的方法

如何用一种方法指向两种不同的方法？

如何将两种方法都合并为一种方法？

如何将此代码从两种方法重构为一种方法

提交按钮同时使用两种方法，而不是一种，我该如何解决？

提交按钮同时使用两种方法，而不是一种，我该如何解决？

如何重构代码，所以是两种Web表单的一种方法

一种scala中的两种方法

使用 List 从一种方法到另一种方法

使用一种方法的结果以另一种方法计算价格

如何在java中将Int从一种方法返回到另一种方法

如何将一种方法拆分为两种较小的方法，一种用于输入，一种用于显示？

MySQL使用GROUP BY的另一种方法

使用很多'if'语句的另一种方法

在另一种方法中使用int

MySQL使用GROUP BY的另一种方法

在另一种方法中使用Return

使用另一种方法的对象实例

两种文本视图，一种在左侧，另一种在右侧

如何将这种方法与另一种方法结合使用？

使用CSS填充背景-两种不同的颜色，一种与另一种颜色重叠

找出一种方法是否可以调用另一种方法

terraform计划是一种方法，但不是另一种方法？