使用Bootstrap前端框架是比较美观方便的，而使用Bootstrap Validator可大大减少开发js验证的时间，可使用jq技术实现表单验证。
1 导入了js包和css包
这些是需要导入的js,css包.使用表单验证必备
下载地址：(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)
2 在表单中，若对某一字段想添加验证规则，默认需要以<div class=”form-group”></div>包裹（对应错误提示会根据该class值定位），内部<input class="form-control" />标签必须有name属性值，此值为验证匹配字段。
3 具体代码如下
js代码
$(function(){
$('form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid:'glyphicon glyphicon-ok',
invalid:'glyphicon glyphicon-remove',
validating:'glyphicon glyphicon-refresh'
},
fields: {
username: {
message:'用户名验证失败',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 15,
message: '用户名长度在6~15位之间'
},
threshold:6,
remote: {
url: '/OnlineMusic/user/checkUserExist.do',
message: '该用户已存在，请重新输入',
delay: 500,
type: 'POST'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '用户名只能包含字母数字下划线'
}
}
},
password: {
message:'密码验证失败',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 15,
message: '密码长度在6~12位之间'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '密码只能包含字母数字下划线'
}
}
},
rpassword: {
message:'确认密码验证失败',
validators: {
notEmpty: {
message: '确认密码不能为空'
},
identical: {
field: 'password',
message: '两次输入密码不一致'
}
}
},
email: {
message:'邮箱验证失败',
validators: {
notEmpty: {
message: '邮箱不能为空'
},
regexp: {
regexp: /^[a-zA-Z0-9_.-][email protected][a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
message: '您填写的邮箱格式不正确'
}
}
}
}
});
});
4 判断用户名已存在是上面代码里的 remote，返回的是json数据如下
{"valid":false} //表示不合法，验证不通过
{"valid":true} //表示合法，验证通过controller层返回代码如下 @RequestMapping("/checkUserExist.do")
@ResponseBody
public String checkUserExist(String username) {
boolean flag = false;
String stringJson = null;
int count = userService.checkUserExist(username);
if(count == 0) {
flag = true;
}
Map<String, Boolean> map = new HashMap<String, Boolean>();
map.put("valid", flag);
ObjectMapper objectMapper = new ObjectMapper();
try {
stringJson = objectMapper.writeValueAsString(map);
} catch (Exception e) {
e.printStackTrace();
}
return stringJson;
}
注意：@Responsebody 注解表示该方法的返回的结果直接写入 HTTP 响应正文（ResponseBody）中，一般在异步获取数据时使用，通常是在使用 @RequestMapping 后，返回值通常解析为跳转路径，加上 @Responsebody 后返回结果不会被解析为跳转路径，而是直接写入HTTP 响应正文中。