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修饰
