Validate插件的自定義驗證方法入門（結合Ajax實現用戶名的數據庫查重）
概述
本文介紹Validate自定義表單校驗方式。Validate插件雖然提供了豐富的驗證規則，但在很多時候仍然很難滿足我們的開發需求，在注冊頁面我們需要通過ajax驗證用戶輸入的用戶名是否已經被他人注冊，那此時通過傳統的Validate驗證方式已經無法滿足需求了！ 我們可以通過自定義驗證方法來結合ajax實現這個需求。
自定義ajax基本語法
因為validate是JQuery的插件，所以在此之前必須先導入JQuery和validate的JS包。
<script type="text/javascript">
//下面開始自定義一個校驗規則（addMethod方法傳入兩個參數，第一個是自定義校驗規則的規則名稱，第二個傳入的是校驗方法）
$.validator.addMethod(
"規則名稱",
function(value,element,params){
//這個是驗證所調用函數（校驗函數），傳入三個參數
//value:輸入的內容（表單元素輸入的內容，如果此時username表單元素綁定了該校驗規則，那么value就是在觸發此校驗規則時，用戶輸入的用戶名）
//element:被校驗的元素對象
//params：規則對應的參數值（例：在required:true 傳入的params就是true）
}
);
</script>在這里需要明確的是
- addMethod()方法中需要傳入兩個參數，第一個參數為自定義校驗規則的規則名稱，第二個為校驗時所調用的方法（校驗函數）。
- 在傳入的校驗函數中有三個形參（具體作用前面已經指出）
- 校驗函數需要返回布爾值，如果返回為true，則不會顯示綁定的提示信息。如果為false，就會顯示綁定的信息（“用戶名已存在”）
用戶名的查重需求的具體實現
- 前端頁面實現
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <title>會員注冊</title> </head> <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> <!-- 引入表單校驗jquery插件 --> <script src="js/jquery.validate.min.js" type="text/javascript"></script> <style> .error{ color:red } </style> <script type="text/javascript"> //自定義校驗規則 $.validator.addMethod( //規則的名稱 "checkUsername", //校驗的函數 function(value,element,params){ //定義一個標志 var flag = false; //此時使用ajax后臺校驗用戶名是否正確 $.ajax({ "async":false, "url":"${pageContext.request.contextPath}/checkUsername", "data":{"username":value}, "type":"POST", "dataType":"json", //這里的data是服務器傳來的一個json字符串，前端解析為JS對象（里面包含是否存在該用戶的信息） "success":function(data){ //data.isExist==false代表服務器不存在該用戶 flag = data.isExist; } }); //返回false代表該校驗器不通過 return !flag; } ); $(function(){ $("#myform").validate({ rules:{ "username":{ "required":true, "checkUsername":true } }, messages:{ "username":{ "required":"用戶名不能為空", "checkUsername":"用戶名已存在" } } ); }); </script> <body> <form id="myform" class="form-horizontal" action="省略" method="post" > 用戶名<input type="text" class="form-control" id="username" name="username" placeholder="請輸入用戶名"> </form> </body> </html>
- 后端頁面實現
-
package com.web.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.service.UserService; public class CheckUsernameServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String username=request.getParameter("username"); UserService service=new UserService(); //isExist代表用戶名是否存在，true代表存在,false代表不存在 boolean isExist=service.checkUserisExist(username); //封裝json數據 String json="{\"isExist\":"+isExist+"}"; response.getWriter().write(json); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
在這里我們需要明確
- ajax如何收服務器傳來的數據的，在上面的ajax中定義了一個回調函數（"success":function(data){...}）。這個回調函數中有一個有一data參數，它代表服務器傳遞過來的數據,可能是js對象，也可能是個文本...。但在前面已經設置data是json（"dataType":"json"）,所以這里的data已經被解析為一個js對象了。所以我們可以通過data.isExist得到對象中的數據。
- 服務器端如何傳輸JSON數據的，服務器端通過response.getWriter().wirte(json);即可傳輸數據。在服務器端的json字符串傳到客戶端后會自動解析為js對象。
下面是博主的其他文章，喜歡的博友們點個關注，謝謝您的支持。
JDK8之前，匿名內部類訪問的局部變量為什么必須要用final修飾
浙公網安備 33010602011771號