BootStrap 是一个强大的前面框架，它用优雅的方式解决了网页问题。最近正在使用其开发网站的表单验证，一点体会记录如下：
注：本文中借鉴了博客Franson 的文章《使用bootstrapvalidator的remote验证经验》
一、准备工作
1.你的网站环境中要有 BootStrap，中文网地址：http://www.bootcss.com/
2.下载BootStrap Validator相关材料，地址：http://bv.doc.javake.cn/
当然，如果你不想一个一个下载到您的项目中的话，可以引入CDN，CDN可以用bootstrap官方的，也可以百度上搜索下“BootStrap CDN”，你一定可以理解是怎么使用。下面是我的引入代码：
<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- Bootstrap Validator JS文件 --> <script src="//cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<!-- Bootstrap Validator 样式文件 --> <link href="//cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
<!-- Bootstrap Validator 中文语言包 --> <script src="//cdn.bootcss.com/bootstrap-validator/0.5.3/js/language/zh_CN.min.js"></script>
二、初步应用。
这里直接引用BootStrap Validator 官方的例子，先看HTML代码：
<form class="form-horizontal"> <div class="form-group"> <label class="col-lg-3 control-label">Username</label> <div class="col-lg-9"> <input type="text" class="form-control" name="username" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">Email address</label> <div class="col-lg-9"> <input type="text" class="form-control" name="email" /> </div> </div> </form>
一段很普通的BootStrap网页代码，一个表单，里面是用户名，邮箱地址二个INPUT
BootStrap验证是根据表单控件的name值进行检验的，下面是JS代码：
<script> $(document).ready(function() { $('.registerForm').bootstrapValidator({ message: 'This value is not valid', //验证错误时的信息 feedbackIcons: { //验证时显示的图标 valid: 'glyphicon glyphicon-ok', //正确图标 invalid: 'glyphicon glyphicon-remove', //错误图标 validating: 'glyphicon glyphicon-refresh' //正在更新图标 }, fields: { //要验证哪些字段 username: { //与表单里input的name属性对应 message: 'The username is not valid', //验证错误时的信息，当然这里是可以使用中文的 validators: { notEmpty: { //非空判断 message: 'The username is required and cannot be empty' //验证错误时的信息， }, stringLength: { //长度判断 min: 6, //不得小于 max: 30, //不得超过 message: 'The username must be more than 6 and less than 30 characters long' //验证错误时的信息， }, regexp: { //正则表达式判断 regexp: /^[a-zA-Z0-9_]+$/, //表达式内容 message: 'The username can only consist of alphabetical, number and underscore' //验证错误时的信息， } } }, email: { validators: { notEmpty: { message: 'The email is required and cannot be empty' }, emailAddress: { //是不是正确的email格式 message: 'The input is not a valid email address' } } } } }); }); </script>
BootStrap Validator 已经定义好很多验证方式，每一种方式的用法参见：http://bv.doc.javake.cn/validators/
其中几个常用的，提一下，其实一看就懂，很好理解：
| 序号 | 方式 | 释义 | 详细查看 |
| 1 | different | 判断与另一个控件是否相同，常用于密码 | http://bv.doc.javake.cn/validators/different/ |
| 2 | notEmpty | 判断非空 | http://bv.doc.javake.cn/validators/notEmpty/ |
| 3 | regexp | 应用正则表达式 | http://bv.doc.javake.cn/validators/regexp/ |
| 4 | emailAddress | 判断是否为EMAIL地址 | http://bv.doc.javake.cn/validators/emailAddress/ |
| 5 | stringLength | 长度判断 | http://bv.doc.javake.cn/validators/stringLength/ |
三、进阶应用
如果不想用默认的模板，可以使用以下个方式来进行一些自定义验证
callback方式，API地址：http://bv.doc.javake.cn/validators/callback/
callback方式可以让您自定义函数用于判断，下面看个例子
HTML(内容就是显示输入运算结果)
<form id="captchaForm" class="form-horizontal"> <div class="form-group"> <label class="col-lg-3 control-label" id="captchaOperation"></label> <div class="col-lg-2"> <input type="text" class="form-control" name="captcha" /> </div> </div> </form>
来看看JS
<script> $(document).ready(function() { // 随机取min,max中间的一个数 function randomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }; // 生成随机两个数相加的文字显示内容，显示到capchaOperation中去 $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' ')); $('#captchaForm').bootstrapValidator({ //验证 feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { captcha: { validators: { callback: { //callback方式 message: 'Wrong answer', callback: function(value, validator) { //您可以在这里实现自定义功能 // Determine the numbers which are generated in captchaOperation
//这里面value就是input里输入的值
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]); return value == sum; } } } } } }); }); </script>
这样当默认的方式不能满足您的要求的时候就可以用callback方式，自己实现函数用于完成特殊的判断，比如判断中国居民身份证号是否正确……
四、异步验证
最常见的应用就是验证用户名是否注册过，下面看我的程序中的代码：
HTML
<form class="form-horizontal"> <div class=" form-group has-feedback has-error"> <label for="loginName" class="col-sm-3 control-label ">用户名：</label> <div class="col-sm-5"> <div class="input-group"> <input type="text" class="form-control" id="loginName" name="loginName" placeholder="请输入您登录用的用户名"> <span class="input-group-addon"> </span> </div> </div> </div> </form>
JS
<script> $(function () { $('form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh'}, fields: { loginName: { message: '用户名验证失败', validators: { notEmpty: {message: '用户名不能为空'}, stringLength: {min: 6,max: 18,message: '用户名长度必须在6到18位之间'}, regexp: {regexp: /^[a-zA-Z0-9_]+$/,message: '用户名只能包含大写、小写、数字和下划线'}, remote: { message: '用户名已经存在', url: '/ajax/checknewuser', //Action的地址，这里我试过，应该是不能加入EL，但网上看到可以加<%=%>输出某个值，我试验没成功，不知道为什么 data:{ //传参数 username:function(){return $("#loginName").val()}, //username参数名，不用引号，如果想传入特定控件的值一定加入function,这样才能把值传入，不知道为什么…… }, delay : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大） type: 'POST'//请求方式 } } } } }); }); </script>
Action 用 SpringMvc实现
package com.aocshallo.actions.ajax; import java.io.IOException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.json.JSONObject; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller @RequestMapping("/ajax") public class AjaxAction extends BaseAction { public AjaxAction() { // TODO Auto-generated constructor stub } @RequestMapping("/checknewuser") public void checkNewUser(HttpSession session,HttpServletRequest request,HttpServletResponse response) throws IOException{ //。。。。 这是您的判断逻辑 Boolean ret = true; // 这是最终返回值 //下面是response的设置 response.setContentType("text/xml;charset=utf-8"); response.setHeader("Cache-Control","no-cache"); try { //这是输出为JSON串的一种方式，结果应为JSON串，属性名一定是valid，值为true或false JSONObject jsobjcet = new JSONObject(); jsobjcet.put("valid", ret); response.getWriter().write(jsobjcet.toString()); //System.out.println(jsobjcet.toString()); } catch (IOException e) { e.printStackTrace(); } } }
您的Action最终输出的一定是下面形式的文本：
{"valid":false} //表示不合法，验证不通过
{"valid":true} //表示合法，验证通过
所以才使用JSONObject做为输出。