javascript - Javascript 在 jsp 文件中不起作用

Question

我正在使用 JSP 开发一个 web 项目，我在谷歌上搜索了很多关于此的内容，发现了一个类似的问题，但没有任何解决方案！

页面是否在 javascript 执行之前提交或什么。这是代码

<%@ 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">
    <title> Registration</title>
    <link rel="stylesheet" href="style.css">
    <script>
    fun1(field)
    {
        if(field.value==""){alert("enter name");}
    }
    </script>
</head>
<body id="html">

<form method=post action=registerUser.jsp><center>
<br><br>
<section class="registration_form" >
<table id="tab1" bgcolor="#ffffff" width="60%" height="320%">
<td width="10%"></td><td><h1>Register here</h1></td>
        <tr><td width="20%"></td><td><label for="First Name">First Name</label>
        <input type="First Name" id="usernametxtbox" name="FirstName" onblur="fun1(this)" placeholder="enter First Name" required>
        </td></tr>
        <tr><td width="20%"></td><td><label for="Last Name">Last Name</label>
        <input type="Last Name" id="usernametxtbox" name="LastName" placeholder="enter Last Name" required>
        </td>
        </tr>
        <tr><td width="20%"></td><td>
        <label for="User Name">User Name</label>
        <input type="User Name" id="txtbox" name="UserName" placeholder="enter User Name" required></td>
        </tr>
        <tr><td width="20%"></td>
        <td><label for="usermail">Email</label>
        <input type="email" id="txtbox" name="usermail" placeholder="yourname@email.com" required></td></tr>
        <tr><td width="20%"></td><td>
        <label for="password">Password</label>
        <input type="password" id="txtbox" name="password" placeholder="password" required></td></tr>
        <tr><td width="20%"></td><td><label for="re-enter password">re-enter Password</label>
        <input type="password" id="txtbox" name="Re-enterpassword" placeholder="Re-enter password" required></td></tr>
        <tr><td width="20%"></td><tr height="10%"><td></td></tr>
        <tr><td width="20%"></td><td><label>Date of Birth:</label>
        <select name=birthday>
    <option> - Month - </option>
    <option value="January">January</option>
    <option value="Febuary">February</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
</select>
<select name="DOBDay">
    <option> - Day - </option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
</select>
<select name="DOBYear">
    <option> - Year - </option>
    <option value="1998">1998</option>
    <option value="1997">1997</option>
    <option value="1996">1996</option>
    <option value="1995">1995</option>
    <option value="1994">1994</option>
    <option value="1993">1993</option>
    <option value="1992">1992</option>
    <option value="1991">1991</option>
    <option value="1990">1990</option>
    <option value="1989">1989</option>
    <option value="1988">1988</option>
    <option value="1987">1987</option>
    <option value="1986">1986</option>
    <option value="1985">1985</option>
    <option value="1984">1984</option>
    <option value="1983">1983</option>
    <option value="1982">1982</option>
    <option value="1981">1981</option>
    <option value="1980">1980</option>
    <option value="1979">1979</option>
    <option value="1978">1978</option>
    <option value="1977">1977</option>
    <option value="1976">1976</option>
    <option value="1975">1975</option>
    <option value="1974">1974</option>
    <option value="1973">1973</option>
    <option value="1972">1972</option>
    <option value="1971">1971</option>
    <option value="1970">1970</option>
    <option value="1969">1969</option>
    <option value="1968">1968</option>
    <option value="1967">1967</option>
    <option value="1966">1966</option>
    <option value="1965">1965</option>
    <option value="1964">1964</option>
    <option value="1963">1963</option>
    <option value="1962">1962</option>
    <option value="1961">1961</option>
    <option value="1960">1960</option>
    <option value="1959">1959</option>
    <option value="1958">1958</option>
    <option value="1957">1957</option>
    <option value="1956">1956</option>
    <option value="1955">1955</option>
    <option value="1954">1954</option>
    <option value="1953">1953</option>
    <option value="1952">1952</option>
    <option value="1951">1951</option>
    <option value="1950">1950</option>
    <option value="1949">1949</option>
    <option value="1948">1948</option>
    <option value="1947">1947</option>

</select></td>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
 <tr><td></td><td><label>Gender:</label><input type="radio" name="gender" value="male" checked > Male
        <input type="radio" name="gender" value="female"> Female</td>
        </tr>
    <tr><td width="20%"></td><td><input type="submit" value="register" id="butn">
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    </table>
</section>
</center>
</form>

</body>
</html>

检查图像（包括在服务器上执行的 jsp 页面），

我是否需要创建任何servlet 控制器，如果，我应该改变什么？

score 0 · Accepted Answer

几个问题

您需要使用 function 关键字：function fun1(field)...
使用提交事件而不是模糊 - 特别是当您在模糊中发出警报时。
ID 必须是唯一的！你不能有两个id="usernametxtbox"
使用引号<form method="post" action="registerUser.jsp"><center>
您不能在没有 ID 的字段上使用 document.getElementById

我建议如下：

...
<head>
<script>
window.onload=function() {
  document.getElementById("myForm").onsubmit=function() {
    if (this.FirstName.value=="") {
      alert("Please enter name");
      return false; // cancel submit
    }
    if (this.LastName.value=="") {
      alert("Please enter name");
      return false; // cancel submit
    }

    return true; // allow submit

  }
}
</script>

使用

<form id="myForm" method="post" action="registerUser.jsp">

查看您的代码，您可能想要执行以下操作：

小提琴

<form name="registration"  method="post" action="login.jsp" 
onsubmit="return validateform(this);">

function validateform(theForm) {


  var First_Name = theForm.First_Name;
  var Last_Name = theForm.Last_Name;
  var UserName = theForm.UserName;
  var phoneNo = theForm.phoneNo;
  var password = theForm.password;
  var reenter_password = theForm.reenter_password;
  var email = theForm.email;
  var gender = theForm.gender;
  var title = theForm.title;
  var day = theForm.dobday;
  var month = theForm.dobmonth;
  var year = theForm.dobyear;
  var atposition = email.value.indexOf("@");
  var dotposition = email.value.lastIndexOf(".");


  if (First_Name.value == "") {
    alert("Name can't be empty");
    First_Name.focus();
    return false;
  }
  if (!First_Name.value.match(/^[A-Za-z]+$/)) {
    alert("name contains invalid Characters!");
    First_Name.focus();
    return false;
  }
  if (Last_Name.value == "") {
    alert("Name can't be empty");
    Last_Name.focus();
    return false;
  }
  if (!Last_Name.value.match(/^[A-Za-z]+$/)) {
    alert("name contains invalid Characters!");
    Last_Name.focus();
    return false;
  }

  if (title && (title.selectedIndex < 1 || title.options[title.selectedIndex].value == "")) {
    alert("please select the title");
    title.focus();
    return false;
  }

  /* user name validation */
  if (UserName.value == "") {
    alert("user Name can't be empty");
    UserName.focus();
    return false;
  }


  /* phoneNo validation */
  if (phoneNo.value == "") {
    alert("phoneNo can't be empty");
    phoneNo.focus();
    return false;
  }
  if (!phoneNo.value.match(/^\d{10}$/)) {
    alert("phoneNo should contain only 10 numbers!");
    phoneNo.focus();
    return false;
  }

  /* email validation */
  if (email.value == "") {
    alert("please enter your email");
    email.focus();
    return false;
  }
  if (atposition < 1 || dotposition < atposition + 2 || dotposition + 2 >= email.value.length) {
    alert("Please enter a valid e-mail address \n atpostion:" + atposition + "\n dotposition:" + dotposition);
    email.focus();
    return false;
  }


  /* password validation */
  if (password.value == "") {
    alert("password can't be empty");
    password.focus();
    return false;
  }
  if (password.value.length < 6) {
    alert("Password must be at least 6 characters long.");
    password.focus();
    return false;
  }
  if (reenter_password.value == "") {
    alert("please re-enter the password");
    reenter_password.focus();
    return false;
  }
  if (!password.value.match(reenter_password.value)) {
    alert("password must be same!");
    return false;
  }

  if (!gender[0].checked && !gender[1].checked) {
    alert("please select your gender");
    gender.focus();
    return false;
 }
  if (day) {
    if (day.selectedIndex < 1 || day.options[day.selectedIndex].value == "") {
      alert("please select the day");
      dobdate.focus();
      return false;
    }
  }
  if (month) {
    if (month.selectedIndex < 1 || month.options[month.selectedIndex].value == "") {
      alert("please select the month");
      theForm.dobmonth.focus();
      return false;
    }
  }
  if (year) {
    if (year.selectedIndex < 1 || year.options[year.selectedIndex].value == "") {
      alert("please select the year");
      theForm.dobyear.focus();
      return false;
    }
  }
  return true;
}

javascript - Javascript 在 jsp 文件中不起作用

1 回答 1

Related

Reference