BootStrap-validator 使用记录(JAVA SpringMVC实现)

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">&nbsp;&nbsp;</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做为输出。