(一)页面
<div class="form-group col-md-5">
<label for="name" class="col-sm-7 control-label">用户名:</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name" name="name" placeholder="用户名"/>
</div>
</div>
(二)js代码
fields: {
name: {
validators: {
notEmpty: {
message: '*账号不能为空'
},
threshold: 2,//自定义有2字符以上才发送ajax请求
remote: {
//ajax验证。服务器端返回值,true代表不重复,false代表重复server result:{"valid",true or false}
url: "${ctx}/checkUserName",
message: '用户名已存在,请重新输入',
delay: 1000,//ajax刷新的时间是1秒一次
type: 'POST',
//自定义提交数据,默认值提交当前input value
data: function(validator) {
return {
userName : $.trim($("#myform").find("#name").val())
};
}
}
}
}
});
(三)Controller层后台代码
@ResponseBody
@RequestMapping("/checkUserName")
public String checkUserName(SysUser sysUser){
//默认true
boolean result = true;
List<SysUser> users=sysUserService.verificateUser(sysUser);
//如果系统已有用户名则返回false
if(users.size()>0){
result = false;
}
Map<String, Boolean> map = new HashMap<>();
map.put("valid", result);
ObjectMapper mapper = new ObjectMapper();
String resultString = "";
try {
resultString = mapper.writeValueAsString(map);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return resultString;
}