Javascript在jsp文件中不工作

我正在使用JSP开发一个web项目，我对google有很多了解，发现了一个没有任何解决方案的类似问题！Javascript在jsp文件中不工作

在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="[email protected]" 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控制器，如果什么我应该改变吗？

来源

2016-03-02 AB-Technoholic

这不是有效的JS：'FUN1（场）'你需要'功能FUN1（场）' - 我强烈建议你在一个不会提醒尽管模糊。我建议你将该函数的调用移动到提交处理程序，如果该字段未填充，则返回false – mplungjan

我真的不建议将js与脚本混合使用。请外化。 –

@sᴜʀᴇsʜᴀᴛᴛᴀ - 这不是问题 – mplungjan

几个问题

您需要使用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">

看着你的代码，你可能想要做这样的事情：

FIDDLE

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

来源

2016-03-02 10:22:32 mplungjan

是的，上面的脚本完全符合要求，但在服务器上运行不会使脚本运行！ –

@ AB-Technoholic你有一个花括号为时尚早。我也更改了电子邮件的“x”。它现在应该工作： – mplungjan

Javascript在jsp文件中不工作

回答

相关问题