引入niceValidator看這篇博客入門
實現效果：
爲了演示簡單 後臺將已存在的用戶名 固定設置爲jerry
參考niceValidator官方文檔
JSON解析器： (Json和ajax相關知識看這篇)
常見的解析器：Jsonlib，Gson，fastjson，jackson
jackson解析器jar包下載
鏈接：https://pan.baidu.com/s/1ClAjP3cM4oQ7-l8D1ZcM-Q
提取碼：9yo7
代碼示例：
前臺：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>註冊頁面</title>
<!--引入插件相關文件-->
<link href="./validator/jquery.validator.css" rel="stylesheet">
<script src="./validator/jquery-3.3.1.min.js"></script>
<script src="./validator/jquery.validator.min.js"></script>
<!--中文國際化文件-->
<script src="./validator/local/zh-CN.js"></script>
</head>
<body>
<form data-validator-option="{theme:'yellow_right_effect',stopOnError:true}">
<input type="text" id="username" name="username" data-rule="用戶名:required;remote[registerServlet]" placeholder="請輸入用戶名">
<span id="s_username"></span>
<br>
<input type="password" name="password" placeholder="請輸入密碼"><br>
<input type="submit" value="註冊"><br>
</form>
</body>
</html>
後臺：
package cn.kinggm520.web;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
/**
* 作者: kinggm Email:[email protected]
* 時間: 2020-03-04 22:26
*/
@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解決response數據亂碼
response.setContentType("application/json;charset=utf-8"); //設置返回json格式
// 獲取用戶名
String username = request.getParameter("username");
// 定義返回數據
Map<String, String> map = new HashMap<>();
// 判斷用戶名是否存在
// 這裏設置已存在的用戶名爲jerry
if ("jerry".equals(username)) {
// 用戶名已存在
map.put("error", "用戶名已存在，請換個用戶名");
ObjectMapper objectMapper = new ObjectMapper();
// Map轉Json輸出到頁面 方式一
// String string = objectMapper.writeValueAsString(map);
// response.getWriter().write(string);
// Map轉Json輸出到頁面 方式二
objectMapper.writeValue(response.getWriter(),map);
} else {
map.put("ok", "用戶名可用");
ObjectMapper objectMapper = new ObjectMapper();
objectMapper.writeValue(response.getWriter(),map);
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}