概述

本文介绍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对象。

注：以上观点是个人对此知识点的一点理解，如有意见也欢迎广大博友指出！

Validate插件的自定义验证方法入门（结合Ajax实现用户名的数据库查重）

概述

自定义ajax基本语法

在这里需要明确的是

用户名的查重需求的具体实现

在这里我们需要明确

猜你喜欢