jQuery-validate异步验证remote前端到后台实现
1、首先介绍下后端实现方式，在service层UserService类中添加方法/*** 查数据库，检查输入的用户名是否已经存在* @param username 用户名* @return 如果数据库中存在输入的用户名则返回false，否则返回true*/boolean validateUserName(String username);
2、在controller控制层UserController类中，添加如下方法@RequestMapping("/validateUserName")@ResponseBodypublic boolean validateUserName(String username){ if(StringUtils.isBlank(username)){ return false; } return userService.validateUserName(username);}@RequestMapping是springmvc的web映射路径的配置
3、在webapp目录下面添加html页面，userInfo-remote-validate.html，镙烨莲峪添加username: { required: true, minlength: 2, remote: { url: "../user/validateUserName", type: "post", data: { username: function() { return $("#userInfoForm input[name='username']").val(); } } }}url就是对应后端应用请求的地址type是http请求方式data是请求的参数远程服务端返回的内容必须是true或false
4、完整的页面代码如下：<挢旗扦渌;!DOCTYPE html><html><head> <稆糨孝汶;meta charset="utf-8"> <title>用户信息</title> <script src="../resources/js/jquery-validation/jquery.min.js"></script> <script src="../resources/js/jquery-validation/jquery.validate.min.js"></script> <script src="../resources/js/jquery-validation/messages_zh.js"></script> <script src="../resources/js/jquery-validation/additional-methods.js"></script> <script> $().ready(function() { $("#userInfoForm").validate({ rules: { username: { required: true, minlength: 2, remote: { url: "../user/validateUserName", type: "post", data: { username: function() { return $("#userInfoForm input[name='username']").val(); } } } }, age: { required: true, digits:true } }, messages: { username: { required: "请输入用户名", minlength: "用户名必需由两个字母组成", remote:"用户名已存在" }, age: { required: "请输入年龄", digits: "必须输入整数" } }, onkeyup:false }); }); </script> <style> .error{ color:red; } </style></head><body><form id="userInfoForm" method="post" action=""> <fieldset> <legend>用户基本信息</legend> <p> <label for="username">用户名</label> <input id="username" name="username" type="text"> </p> <p> <label for="age">年龄</label> <input id="age" name="age" type="text"> </p> <p> <input class="submit" type="submit" value="提交"> </p> </fieldset></form></body></html>打开浏览器访问测试页面，点击提交按钮，效果如下
5、在用户名表单中输入内容，验证远程验证请求当输入内容之后，光标离开用户名输入框或点击提交按钮的时候，会看到调试工具里面有网络请求，表示向服务器发送了远程请求验证
6、当输入数据库中已存在的用户名的时候，可以看到提示用户名已存在数据库中已经存在一条用户名为tom的数据，输入之后光标离开输入框，看页面测试结果
