目前在开发一个交易平台，前端用的是bootstrap，后台框架是springMVC。因涉及到一些表单需要进行验证，所以选择了bootstrapValidator来进行表单验证，效果还算不错。话不多说，直接进入开发步骤。
一、首先下载bootstrap、bootstrapValidator和jquery相关的js和css，这一部分我已上传到，有需要的可以下载下来用。
下载地址：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" ο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; }
这样返回的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的话会有提示。
五、结果
验证不通过点击提交时结果如下：
验证通过时点击提交后就会进行表单提交
欢迎大家在评论区留言与交流~~~~~
最后，打波广告。微信搜索公众号"购即省"，淘宝购物领券，购物即省钱。
