项目中经常会遇到需要后台验证问题，如用户名、用户账号是否存在等。使用jQuery Validate插件可以使用remote校验规则完成验证。

示例：

一.基本用法

1.需要验证的表单

<form id="registForm"> <input type="text" id="username" name="username"> </form>

2.js

使用remote校验规则，最简单粗暴的写法是remote: url，此时请求的url后面自动拼接当前验证的值，例如下面的写法，请求的url为：xxx/checkUsername.do?username=test

// 导入jquery、validte库略$(function() { $.validator.setDefaults({ submitHandler: function(form) { // 验证通过处理 ... } }); $("#registForm").validate({ rules: { username: { required: true, remote: "checkUsername.do" }, }, messages: { username: { required: "用户名不能为空", remote: "用户名已经存在" } } });});

3.后台（Spring MVC测试）

后台响应只能输出true或false，不能有其他数据，true：验证通过，false：验证失败；设置返回类型为boolean或String都可以

(1).返回boolean

@RequestMapping("/checkUsername")public @ResponseBody boolean checkUsername(@RequestParam String username) { // 测试 return !"test".equals(username);}

(2).返回String

@RequestMapping("/checkUsername")public @ResponseBody String checkUsername(@RequestParam String username) { // 测试 return !"test".equals(username) ? "true" : "false";}

二.其他用法

上面的用法不能满足实际的需求，有时候会有需要提交其他参数、参数名和属性名不一致或请求方式为POST的情况，写法如下：

1.js

使用data选项，也就是jQuery的$.ajax({...})的写法；

提交的数据需要通过函数返回值的方式，直接写值有问题；

默认会提交当前验证的值，也就是下例中的 username: xxx会被默认作为参数提交

....username: { required: true, remote: { url: "checkUsername.do", type: "post", //数据发送方式 dataType: "json", //接受数据格式 data: { //要传递的数据 username: function() { return $("#username").val(); }, extra: function() { return "额外信息"; } } }}

2.后台

限制了必须为POST方式请求

@RequestMapping(value = "/checkUsername", method = RequestMethod.POST)public @ResponseBody boolean checkUsername(User user, @RequestParam String extra) { // 测试 System.out.println(extra); return !"test".equals(user.getUsername());}

参考文章：http:///jquery/jquery-plugin-validate.html

以上这篇jQuery Validate插件ajax方式验证输入值的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。