在项目中使用了jQuery-validate作为表单的验证js框架的时候，大部分使用的验证规则为：是否为空、长度、数字类型、邮箱格式等验证。但也有需要验证，比如用户名是否已经存在，这个就需要发送请求到后端服务器去查询数据库里面是否已经存在用户输入的用户名，如果存在则返回false，如果不存在则验证通过。下面就来介绍下前端到后端完整的验证方式
-
jquery-validate
-
java
-
首先介绍下后端实现方式，在service层UserService类中添加方法
/**
* 查数据库，检查输入的用户名是否已经存在
* @param username 用户名
* @return 如果数据库中存在输入的用户名则返回false，否则返回true
*/
boolean validateUserName(String username);
-
在controller控制层UserController类中，添加如下方法
@RequestMapping("/validateUserName")
@ResponseBody
public boolean validateUserName(String username){
if(StringUtils.isBlank(username)){
return false;
}
return userService.validateUserName(username);
}
@RequestMapping是springmvc的web映射路径的配置
-
在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
-
完整的页面代码如下：
<!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>
打开浏览器访问测试页面，点击提交按钮，效果如下
-
在用户名表单中输入内容，验证远程验证请求
当输入内容之后，光标离开用户名输入框或点击提交按钮的时候，会看到调试工具里面有网络请求，表示向服务器发送了远程请求验证
-
当输入数据库中已存在的用户名的时候，可以看到提示用户名已存在
数据库中已经存在一条用户名为tom的数据，输入之后光标离开输入框，看页面测试结果
