人们，我在HTML表单验证中遇到了问题。目前我正在使用JSP（在后端）提取表单数据和jquery来验证HTML文件中的数据。问题是，当我在服务器上运行我的HTML（apache tomcat）时，我的jquery验证片段不起作用，数据只是传递给JSP文件。只有当我从表单标记中删除操作属性时，验证代码才会运行，但JSP不会被调用。这是我的HTML和JSP脚本。
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*,javax.mail.*"%>
<%@ page import="javax.mail.internet.*,javax.activation.*"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ page import = "java.util.regex.Pattern,java.util.regex.Matcher,java.util.regex.*" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Yay!</title>
</head>
<body>
<%
//-------------->
String first = request.getParameter("firstname");
String last = request.getParameter("lastname");
String Username = request.getParameter("username");
String Email = request.getParameter("email");
String day = request.getParameter("date");
String month = request.getParameter("month");
String year = request.getParameter("year");
String pass1 = request.getParameter("password");
String pass2 = request.getParameter("confirmpassword");
String date = day + '/'+ month + '/' + year ;
%>
<%= first %><br>
<%= last %><br>
<%= Username %> <br>
<%= Email%> <br>
<%= date%> <br>
<%= pass1%> <br>
<%= pass2%> <br>
</body>
</html>
<!-- HTML file-->
<form class = ".form-inline"
method = "POST" action = "process.jsp"
onSubmit="return validate(this);" name="form" >
<lable><b>Name:</b></lable>
<input type = "text" placeholder = "first"
id = "firstname"
name = "firstname"></input>
<input type = "text" placeholder = "last"
id = "lastname"
name = "lastname"></input><br><br>
<label>Birthday:</label>
<div class = "date">
<input type = "text" placeholder = "dd"
id = "date" name = "date"></input>
<input type = "text" placeholder = "mm"
id = "month" name = "month"></input>
<input type = "text" placeholder = "yy"
id = "year" name="year"></input>
<br><br>
</div>
<div class="form-group ">
<label><b>User Name:</b></label>
<input type = "text"
class = "form-control"
id = "username" name="username"></input>
<br>
<label for="password">Password:</label>
<input type="password"
class="form-control"
id="password" name = "password">
<br>
<label for="confirmpassword">
Confirm Password:</label>
<input type="password"
class="form-control"
id="confirmpassword" name = "confirmpassword">
<label for="email">Email:</label>
<input type="email"
class="form-control" id="email" name ="email">
<br>
<button type="submit"
class="btn btn-primary btn-block"
id = "submission"
value ="submit">Submit</button>
<script type="text/javascript">
/*global $*/
$(function(){ // JS form validation snippet.
// variables are used to
store different types of
regex expressions.
var ck_name = /^[A-Za-z0-9 ]{3,20}$/;
var ck_email
= /^([\w-]+ (?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-] {0,66})
\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ;
var ck_username =
/^[A-Za-z0-9_] {1,20}$/;
var ck_password =
/^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;
var flag;
$("#submission").on("click",
function validate(form){
var day = $("#date").val();
var month = $("#month").val();
var year = $("#year").val();
if ((day >= 1 && day <= 31 ) &&
(month >= 1 && month <= 12) &&
(year >= 1930)) {
//alert("correct date ");
}
else {
//alert("wrong date");
}
//alert("submission active");
// variable extracts
the specific user input from the form.
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
var email = $("#email").val();
var username = $("#username").val();
var password = $("#password").val();
var confirmpassword = $("#confirmpassword").val();
var errors = [];
if (!ck_name.test(firstname)) {
errors[errors.length] = "Your valid first Name .";
}
if (!ck_name.test(lastname)) {
errors[errors.length] = "Your valid last Name .";
}
if (!ck_email.test(email)) {
errors[errors.length] =
"Yor must enter a valid email address.";
}
if(!ck_username.test(username)) {
errors[errors.length] =
"Your valid UserName no special char .";
}
if (!ck_password.test(password) ) {
errors[errors.length] =
"Your must enter a valid Password ";
}
if (!ck_password.test(confirmpassword) ||
password !== confirmpassword) {
errors[errors.length] = "password doesn't match ";
}
if (errors.length > 0) {
reportErrors(errors);
return false;
}
//$.get("process.jsp", [firstname, lastname, email, username,
password, confirmpassword, day, month, year]);
//alert(".get() executed");
return true;
function reportErrors(errors){
var msg = "Please Enter Valide Data...\n";
for (var i = 0; i<errors.length; i++) {
var numError = i + 1;
msg += "\n" + numError + ". " + errors[i];
}
//alert(msg);
}
});
});
</script>
</div>
</form>
答案 0 :(得分：0)
您的javascript中存在语法错误，请正确检查您的代码 如果我删除所有的javscript代码，那么我能够进行验证。 检查我的代码，你会得到一个想法。
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*,javax.mail.*"%>
<%@ page import="javax.mail.internet.*,javax.activation.*"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ page import = "java.util.regex.Pattern,java.util.regex.Matcher,java.util.regex.*" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Yay!</title>
</head>
<body>
<%
//if(request.getParameter("btnsubmit")!=null){
//-------------->
String first = request.getParameter("firstname");
String last = request.getParameter("lastname");
String Username = request.getParameter("username");
String Email = request.getParameter("email");
String day = request.getParameter("date");
String month = request.getParameter("month");
String year = request.getParameter("year");
String pass1 = request.getParameter("password");
String pass2 = request.getParameter("confirmpassword");
String date = day + '/'+ month + '/' + year ;
// }
%>
<%= first %><br>
<%= last %><br>
<%= Username %> <br>
<%= Email%> <br>
<%= date%> <br>
<%= pass1%> <br>
<%= pass2%> <br>
</body>
</html>
<!-- HTML file-->
<script type="text/javascript">
function validate(form) {
alert('hi');
}
</script>
<form class = ".form-inline"
method = "POST" action ="index.jsp"
onSubmit="return validate(this);" name="form" >
<lable><b>Name:</b></lable>
<input type = "text" placeholder = "first"
id = "firstname"
name = "firstname"></input>
<input type = "text" placeholder = "last"
id = "lastname"
name = "lastname"></input><br><br>
<label>Birthday:</label>
<div class = "date">
<input type = "text" placeholder = "dd"
id = "date" name = "date"></input>
<input type = "text" placeholder = "mm"
id = "month" name = "month"></input>
<input type = "text" placeholder = "yy"
id = "year" name="year"></input>
<br><br>
</div>
<div class="form-group ">
<label><b>User Name:</b></label>
<input type = "text"
class = "form-control"
id = "username" name="username"></input>
<br>
<label for="password">Password:</label>
<input type="password"
class="form-control"
id="password" name = "password">
<br>
<label for="confirmpassword">
Confirm Password:</label>
<input type="password"
class="form-control"
id="confirmpassword" name = "confirmpassword">
<label for="email">Email:</label>
<input type="email"
class="form-control" id="email" name ="email">
<br>
<button type="submit"
class="btn btn-primary btn-block"
id = "submission"
value ="submit" name='btnsubmit'>Submit</button>
</div>
</form>