bootstrap+springMVC中使用bootstrapValidator实现表单验证(附源码！！！)

最新推荐文章于 2022-03-07 14:39:12 发布

置顶男儿何必尽成功

最新推荐文章于 2022-03-07 14:39:12 发布

阅读量4.3k

点赞数 4

本文链接：https://blog.youkuaiyun.com/fanguoddd/article/details/55503979

版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

目前在开发一个交易平台，前端用的是bootstrap，后台框架是springMVC。因涉及到一些表单需要进行验证，所以选择了bootstrapValidator来进行表单验证，效果还算不错。话不多说，直接进入开发步骤。

一、首先下载bootstrap、bootstrapValidator和jquery相关的js和css，这一部分我已上传到优快云，有需要的可以下载下来用。

下载地址：http://download.youkuaiyun.com/detail/fanguoddd/9756411

没有下载积分的童鞋看这里！！！扫描公众号二维码免费获取。公众号二维码：

二、引入相关js和css

其中最后一个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" οnclick="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;
}