【发布时间】：2016-12-18 07:11:53
【问题描述】：
我需要验证名称字段以验证名称字段是否为空以及该名称是否存在于我的数据库中。如果它通过了两个验证（用户输入了一个在我的数据库中不存在的名称），那么表单将被提交。
问题在于我对数据库中存在的名称的验证。我使用了 ajax，即使我使用 e.preventDefault() 来阻止表单提交，如果名称存在于成功块中，它只是弹出一个警报“名称存在”并继续提交表单。
请帮忙。
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="validateForm.js"></script>
<title>Validate Form</title>
</head>
<body>
<form id="form" name="form" action="FormCheck" method="POST">
Name: <input id="name" type="text" name="name"><br>
<input id="btn" type="submit" value="Submit">
<div>
<span id="errorMsg" style="display: none;"></span>
</div>
</form>
</body>
</html>
validateForm.js
$(document).ready(function() {
/*
* $("#btn").click(function(e) {
*
* });
*/
$("#form").submit(function(e) {
validateEmptyField(e);
validateEmailExisted(e);
});
});
function validateEmptyField(e) {
if (!$("#name").val().length) {
e.preventDefault();
alert("name Field is required");
}
}
function validateEmailExisted(e) {
dataString = $("#form").serialize();
dataString = "name=" + $("#name").val();
$.ajax({
type : "POST",
url : "FormCheck",
data : dataString,
dataType : "json",
success : function(data) {
if (data.success) {
//alert(data.value.name);
if(data.value.name === $('#name').val()) {
e.preventDefault();
alert("name existed");
}
}
}
});
}
FormCheck.java
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import com.google.gson.JsonElement;
import com.google.gson.JsonObject;
public class FormCheck extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter("name");
PrintWriter out = response.getWriter();
System.out.println(name);
response.setContentType("text/html");
response.setHeader("Cache-control", "no-cache, no-store");
response.setHeader("Pragma", "no-cache");
response.setHeader("Expires", "-1");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST");
response.setHeader("Access-Control-Allow-Headers", "Content-Type");
response.setHeader("Access-Control-Max-Age", "86400");
FormField formField = getNameInDB(name);
Gson gson = new Gson();
JsonObject myObj = new JsonObject();
JsonElement jsonElement = gson.toJsonTree(formField);
if (name.equals(formField.getName())) {
myObj.addProperty("success", true);
}
myObj.add("value", jsonElement);
out.println(myObj.toString());
out.close();
}
public FormField getNameInDB(String name) {
FormField formField = new FormField();
final String DBDRIVER = "com.mysql.jdbc.Driver";
final String DBURL = "jdbc:mysql://localhost:3306/project";
final String DBUSERNAME = "root";
final String DBPASSWORD = "password";
String query = "";
PreparedStatement ps = null;
Connection conn = null;
try {
Class.forName(DBDRIVER);
conn = DriverManager.getConnection(DBURL, DBUSERNAME, DBPASSWORD);
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
query = "SELECT name FROM Customer WHERE name = ?";
try {
ps = conn.prepareStatement(query);
ps.setString(1, name);
ResultSet rs = ps.executeQuery();
if (rs.next()) {
formField.setName( rs.getString("name").trim());
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
return formField;
}
}
FormField.java
public class FormField {
String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>Validation</display-name>
<servlet>
<servlet-name>FormCheck</servlet-name>
<servlet-class>FormCheck</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>FormCheck</servlet-name>
<url-pattern>/FormCheck</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
【问题讨论】：
标签： javascript java jquery ajax servlets