bootstrap+springMVC中使用bootstrapValidator实现表单验证(附源码！！！)
2017-02-17 08:54
507 查看
目前在开发一个交易平台，前端用的是bootstrap，后台框架是springMVC。因涉及到一些表单需要进行验证，所以选择了bootstrapValidator来进行表单验证，效果还算不错。话不多说，直接进入开发步骤。
一、首先下载bootstrap、bootstrapValidator和jquery相关的js和css，这一部分我已上传到CSDN，有需要的可以下载下来用。
下载地址：http://download.csdn.net/detail/fanguoddd/9756411
二、引入相关js和css
<link rel="stylesheet" href="${base}resource/css/bootstrap.css"/>
<link rel="stylesheet" href="${base}resource/css/bootstrapValidator.css"/>
<link rel="stylesheet" href="${base}resource/css/bootstrap.min.css">
<script type="text/javascript" src="${base}resource/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}resource/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${base}resource/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="${base}resource/js/zh_CN.js"></script>
其中最后一个zh_CN.js是用于中文化处理，引入该js后验证时会显示汉字。
三、jsp中代码
<body>
<div class="container" style="padding-top: 10%;padding-left: 10%">
<div class="row">
<form id="defaultForm" method="post" class="form-horizontal">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-4">
<input type="text" id="username" name="username" class="form-control" placeholder="用户名" >
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">密码</label>
<div class="col-sm-4">
<input type="password" id="password" name="password" class="form-control" placeholder="新密码">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-4">
<input type="password" id="confirmpwd" name="confirmpwd" class="form-control" placeholder="确认密码">
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="button" class="btn btn-primary" id="saveBtn" onclick="doRemindPwd()">Sign up</button>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#defaultForm').bootstrapValidator({//初始化验证
// live: 'disabled',
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
max: 30,
message: '用户名长度不能大于30字符'
},
remote: {
type: 'POST',
url: '${base}checkUserName',
data:{"type":"remind"},
message: '该用户名不存在',
delay: 2000
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空'
},
identical: {
field: 'confirmpwd',
message: '两次密码输入不一致'
}
}
},
confirmpwd: {
validators: {
notEmpty: {
message: '确认密码不能为空'
},
identical: {
field: 'password',
message: '两次密码输入不一致'
}
}
},
tel: {
validators: {
notEmpty: {
message: '电话号码不能为空'
}
}
},
identifyCode: {
validators: {
notEmpty: {
message: '验证码不能为空'
}
}
}
}
});
</body>
首先定义一个form，在这个form中每个待验证标签都要有name，因为bootstrapValidator是根据name进行验证的。在js中初始化表单验证，按照上面的结构进行初始化，很简单。值得注意的是验证时有一个remote属性，该属性用于验证需要接受后台数据的情况，例如验证用户名是否存在，后台只需要且只能返回如下的json格式数据：{"valid":true}
or {"valid":false}。上面的代码中remote的url、data、type等都已给出，其实data中还有一个隐藏的username数据，该数据为input框中的value。后台代码如下：
@RequestMapping(value="checkUserName",method = RequestMethod.POST,produces = "application/json;charset=UTF-8")
@ResponseBody
public String checkUserName(HttpServletResponse response, HttpServletRequest request){
Map<String,Boolean> map = new HashMap<String,Boolean>();
String username=request.getParameter("username");
String type=request.getParameter("type");
QxUser qxUser=this.userService.getUserByParams(username, "uname");
if("remind".equals(type)){
if(qxUser!=null){//用户存在
map.put("valid", true);
}else{
map.put("valid", false);//用户不存在
}
}else{
if(qxUser!=null){//用户存在
map.put("valid", false);
}else{
map.put("valid", true);//用户不存在
}
}
ObjectMapper mapper = new ObjectMapper();
String resultString = "";
try {
resultString = mapper.writeValueAsString(map);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return resultString;
}
这样返回的map格式为{"valid":true} or {"valid":false}，前端bootstrapValidator就可以验证了。
四、表单验证方法调用
使用ajax提交表单时验证如下：
var bootstrapValidator = $("#defaultForm").data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid()){
//TO DO 进行ajax提交
}
上面代码中bootstrapValidator.isValid()返回的是true或者false，如果是true的话即表单验证成功，可以进行接下来的表单提交；如果是false的话会有提示。
五、结果
验证不通过点击提交时结果如下：
验证通过时点击提交后就会进行表单提交
欢迎大家在评论区留言与交流~~~~~
最后，打波广告。微信搜索公众号"省钱潮"，公众号微信号：IT20151230 淘宝购物领券，专为你省钱。
一、首先下载bootstrap、bootstrapValidator和jquery相关的js和css，这一部分我已上传到CSDN，有需要的可以下载下来用。
下载地址：http://download.csdn.net/detail/fanguoddd/9756411
二、引入相关js和css
<link rel="stylesheet" href="${base}resource/css/bootstrap.css"/>
<link rel="stylesheet" href="${base}resource/css/bootstrapValidator.css"/>
<link rel="stylesheet" href="${base}resource/css/bootstrap.min.css">
<script type="text/javascript" src="${base}resource/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}resource/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${base}resource/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="${base}resource/js/zh_CN.js"></script>
其中最后一个zh_CN.js是用于中文化处理，引入该js后验证时会显示汉字。
三、jsp中代码
<body>
<div class="container" style="padding-top: 10%;padding-left: 10%">
<div class="row">
<form id="defaultForm" method="post" class="form-horizontal">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-4">
<input type="text" id="username" name="username" class="form-control" placeholder="用户名" >
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">密码</label>
<div class="col-sm-4">
<input type="password" id="password" name="password" class="form-control" placeholder="新密码">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-4">
<input type="password" id="confirmpwd" name="confirmpwd" class="form-control" placeholder="确认密码">
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="button" class="btn btn-primary" id="saveBtn" onclick="doRemindPwd()">Sign up</button>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#defaultForm').bootstrapValidator({//初始化验证
// live: 'disabled',
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
max: 30,
message: '用户名长度不能大于30字符'
},
remote: {
type: 'POST',
url: '${base}checkUserName',
data:{"type":"remind"},
message: '该用户名不存在',
delay: 2000
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空'
},
identical: {
field: 'confirmpwd',
message: '两次密码输入不一致'
}
}
},
confirmpwd: {
validators: {
notEmpty: {
message: '确认密码不能为空'
},
identical: {
field: 'password',
message: '两次密码输入不一致'
}
}
},
tel: {
validators: {
notEmpty: {
message: '电话号码不能为空'
}
}
},
identifyCode: {
validators: {
notEmpty: {
message: '验证码不能为空'
}
}
}
}
});
</body>
首先定义一个form，在这个form中每个待验证标签都要有name，因为bootstrapValidator是根据name进行验证的。在js中初始化表单验证，按照上面的结构进行初始化，很简单。值得注意的是验证时有一个remote属性，该属性用于验证需要接受后台数据的情况，例如验证用户名是否存在，后台只需要且只能返回如下的json格式数据：{"valid":true}
or {"valid":false}。上面的代码中remote的url、data、type等都已给出，其实data中还有一个隐藏的username数据，该数据为input框中的value。后台代码如下：
@RequestMapping(value="checkUserName",method = RequestMethod.POST,produces = "application/json;charset=UTF-8")
@ResponseBody
public String checkUserName(HttpServletResponse response, HttpServletRequest request){
Map<String,Boolean> map = new HashMap<String,Boolean>();
String username=request.getParameter("username");
String type=request.getParameter("type");
QxUser qxUser=this.userService.getUserByParams(username, "uname");
if("remind".equals(type)){
if(qxUser!=null){//用户存在
map.put("valid", true);
}else{
map.put("valid", false);//用户不存在
}
}else{
if(qxUser!=null){//用户存在
map.put("valid", false);
}else{
map.put("valid", true);//用户不存在
}
}
ObjectMapper mapper = new ObjectMapper();
String resultString = "";
try {
resultString = mapper.writeValueAsString(map);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return resultString;
}
这样返回的map格式为{"valid":true} or {"valid":false}，前端bootstrapValidator就可以验证了。
四、表单验证方法调用
使用ajax提交表单时验证如下：
var bootstrapValidator = $("#defaultForm").data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid()){
//TO DO 进行ajax提交
}
上面代码中bootstrapValidator.isValid()返回的是true或者false，如果是true的话即表单验证成功，可以进行接下来的表单提交；如果是false的话会有提示。
五、结果
验证不通过点击提交时结果如下：
验证通过时点击提交后就会进行表单提交
欢迎大家在评论区留言与交流~~~~~
最后，打波广告。微信搜索公众号"省钱潮"，公众号微信号：IT20151230 淘宝购物领券，专为你省钱。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- SpringMVC中使用Jcaptcha实现校验码验证
- SpringMVC之整合SiteMesh2.4并借助JSR303规范实现表单验证
- 使用 jquery.validate.messages_cn.js 插件实现表单自动验证，出现中文乱码
- 通过jquery validate和bootstrap实现表单后面提示打钩或打叉的效果和真实的表单验证
- Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）
- SpringMVC与SiteMesh2.4无缝整合并借助JSR303规范实现表单验证
- 使用JQuery实现智能表单验证功能
- SpringMVC使用@Valid注解表单验证数据
- springmvc中使用aop实现登录验证
- bootstrap 使用jquery validation 插件 表单验证
- 使用SpringMVC的表单验证
- 如何使用angularjs实现表单验证
- 使用ValidForm进行表单验证，结合SpringMVC检验用户名是否存在
- 57-005-1 bootstrap在表单中的利用，表单验证以及jquery验证框架的使用
- GBin1教程：使用jQuery插件jquery.validationEngine实现表单验证功能
- 使用SpringMVC的表单验证
- GBin1教程：使用jQuery插件jquery.validationEngine实现表单验证功能
- js高级编程------------使用prototype仿java对象实现表单验证
- 使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
- Bootstrap表单验证插件bootstrapValidator使用方法整理