在项目中使用了jQuery-validate作为表单的验证js框架的时候，大部分使用的验证规则为：是否为空、长度、数字类型、邮箱格式等验证。但也有需要验证，比如用户名是否已经存在，这个就需要发送请求到后端服务器去查询数据库里面是否已经存在用户输入的用户名，如果存在则返回false，如果不存在则验证通过。下面就来介绍下前端到后端完整的验证方式
工具/原料
1
jquery-validate
2
java
方法/步骤
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映射路径的配置
4用户信息 打开浏览器访问测试页面，点击提交按钮，效果如下
完整的页面代码如下：
5
在用户名表单中输入内容，验证远程验证请求当输入内容之后，光标离开用户名输入框或点击提交按钮的时候，会看到调试工具里面有网络请求，表示向服务器发送了远程请求验证
6
当输入数据库中已存在的用户名的时候，可以看到提示用户名已存在数据库中已经存在一条用户名为tom的数据，输入之后光标离开输入框，看页面测试结果
注意事项
将onkeyup:false设置为false，是为了不让每次输入一个字符就发送一次远程验证请求，在失去焦点或点击提交时再验证，减少服务器资源消耗
上一篇：js常用的异步处理方法
下一篇：如何确保js加载完全