请问一下， $("#loginForm").validate( 这个函数的工作原理

[eisldkw]

$(document).ready(
function()
{
$("#loginForm").validate(
{
rules: {
validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
},
messages: {
username: {required: "请填写用户名."},
password: {required: "请填写密码."},
validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
},
errorLabelContainer: "#messageBox",
errorPlacement: function(error, element)
{
error.appendTo($("#loginError").parent());
}
}
); // validate
} // function
);// ready


请问这个$("#loginForm").validate 的工作原理和过程是什么，它参数中的rules messages 等参数有啥用 ？非常感谢大家。
以下是validateCodeServlet.java的代码

/**
 * Copyright © 2015-2020 <a href=" ">JeePlus</a> All rights reserved.
 */
package com.jeeplus.core.servlet;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.lang3.math.NumberUtils;
import org.apache.commons.lang3.StringUtils;

/**
 * 生成随机验证码
 * @author jeeplus
 * @version 2017-7-27
 */
@SuppressWarnings("serial")
public class ValidateCodeServlet extends HttpServlet {
	
	public static final String VALIDATE_CODE = "validateCode";
	
	private int w = 70;
	private int h = 26;
	
	public ValidateCodeServlet() {
		super();
	}
	
	public void destroy() {
		super.destroy(); 
	}
	
	public static boolean validate(HttpServletRequest request, String validateCode){
		String code = (String)request.getSession().getAttribute(VALIDATE_CODE);
		return validateCode.toUpperCase().equals(code); 
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String validateCode = request.getParameter(VALIDATE_CODE); // AJAX验证，成功返回true
		if (StringUtils.isNotBlank(validateCode)){
			response.getOutputStream().print(validate(request, validateCode)?"true":"false");
		}else{
			this.doPost(request, response);
		}
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		createImage(request,response);
	}
	
	private void createImage(HttpServletRequest request,
			HttpServletResponse response) throws IOException {
		
		response.setHeader("Pragma", "no-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);
		response.setContentType("image/jpeg");
		
		/*
		 * 得到参数高，宽，都为数字时，则使用设置高宽，否则使用默认值
		 */
		String width = request.getParameter("width");
		String height = request.getParameter("height");
		if (StringUtils.isNumeric(width) && StringUtils.isNumeric(height)) {
			w = NumberUtils.toInt(width);
			h = NumberUtils.toInt(height);
		}
		
		BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
		Graphics g = image.getGraphics();

		/*
		 * 生成背景
		 */
		createBackground(g);

		/*
		 * 生成字符
		 */
		String s = createCharacter(g);
		request.getSession().setAttribute(VALIDATE_CODE, s);

		g.dispose();
		OutputStream out = response.getOutputStream();
		ImageIO.write(image, "JPEG", out);
		out.close();

	}
	
	private Color getRandColor(int fc,int bc) { 
		int f = fc;
		int b = bc;
		Random random=new Random();
        if(f>255) {
        	f=255; 
        }
        if(b>255) {
        	b=255; 
        }
        return new Color(f+random.nextInt(b-f),f+random.nextInt(b-f),f+random.nextInt(b-f)); 
	}
	
	private void createBackground(Graphics g) {
		// 填充背景
		g.setColor(getRandColor(220,250)); 
		g.fillRect(0, 0, w, h);
		// 加入干扰线条
		for (int i = 0; i < 8; i++) {
			g.setColor(getRandColor(40,150));
			Random random = new Random();
			int x = random.nextInt(w);
			int y = random.nextInt(h);
			int x1 = random.nextInt(w);
			int y1 = random.nextInt(h);
			g.drawLine(x, y, x1, y1);
		}
	}

	private String createCharacter(Graphics g) {
		char[] codeSeq = {'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J',
				'K', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
				'X', 'Y', 'Z', '2', '3', '4', '5', '6', '7', '8', '9' };
		String[] fontTypes = {"Arial","Arial Black","AvantGarde Bk BT","Calibri"}; 
		Random random = new Random();
		StringBuilder s = new StringBuilder();
		for (int i = 0; i < 4; i++) {
			String r = String.valueOf(codeSeq[random.nextInt(codeSeq.length)]);//random.nextInt(10));
			g.setColor(new Color(50 + random.nextInt(100), 50 + random.nextInt(100), 50 + random.nextInt(100)));
			g.setFont(new Font(fontTypes[random.nextInt(fontTypes.length)],Font.BOLD,26)); 
			g.drawString(r, 15 * i + 5, 19 + random.nextInt(8));
//			g.drawString(r, i*w/4, h-5);
			s.append(r);
		}
		return s.toString();
	}
	
}

[風灬雲]

$("#loginForm").validate是validate插件提供的api,是前端做表单验证的；rules是每一项的验证规则； messages 则是验证不通过时的提示信息；remote是指远程验证，插件都有规定的，如果是远程验证，api接口必须返回规定格式的数据，一般是返回boolean值;
其实就是一个表单拦截功能，在表单数据提交之前先根据提供的规则进行校验，不通过就进行错误提示，通过后才允许提交；

[eisldkw]

引用 1 楼 qq_41114603 的回复:

$("#loginForm").validate是validate插件提供的api,是前端做表单验证的；rules是每一项的验证规则； messages 则是验证不通过时的提示信息；remote是指远程验证，插件都有规定的，如果是远程验证，api接口必须返回规定格式的数据，一般是返回boolean值;
其实就是一个表单拦截功能，在表单数据提交之前先根据提供的规则进行校验，不通过就进行错误提示，通过后才允许提交；

非常感谢，还要请教一下：
messages: {
username: {required: "请填写用户名."},
password: {required: "请填写密码."},
validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
},
这个错误提示，如果只是没填写密码，这3个提示都显示吗，如果都显示，那肯定不对呀。

[風灬雲]

引用 4 楼 eisldkw 的回复:

[quote=引用 1 楼 qq_41114603 的回复:]
$("#loginForm").validate是validate插件提供的api,是前端做表单验证的；rules是每一项的验证规则； messages 则是验证不通过时的提示信息；remote是指远程验证，插件都有规定的，如果是远程验证，api接口必须返回规定格式的数据，一般是返回boolean值;
其实就是一个表单拦截功能，在表单数据提交之前先根据提供的规则进行校验，不通过就进行错误提示，通过后才允许提交；

非常感谢，还要请教一下：
messages: {
username: {required: "请填写用户名."},
password: {required: "请填写密码."},
validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
},
这个错误提示，如果只是没填写密码，这3个提示都显示吗，如果都显示，那肯定不对呀。[/quote]

rules里面的key对应messages里面的key,同时对应form表单里面name为key的选项或者输入框；有些验证插件的机制是遇到一个不通过就会停下，并提示当前的错误信息；有些插件的机制是全部验证完，把所有不通过的错误信息都提示出来；