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”，你一定可以理解是怎么使用。下面是我的引入代码：

     
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
    
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    
    
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js">script>
    
    
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js">script>
    
    
    <script src="//cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js">script>
　　
    <link href="//cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
　　
    <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">Usernamelabel>
        <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 addresslabel>
        <div class="col-lg-9">
            <input type="text" class="form-control" name="email" />
        div>
    div>
form>

一段很普通的BootStrap网页代码，一个表单，里面是用户名，邮箱地址二个INPUT

BootStrap验证是根据表单控件的name值进行检验的，下面是JS代码：

 

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

这样当默认的方式不能满足您的要求的时候就可以用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

 

 

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做为输出。

 

转载于:https://www.cnblogs.com/aocshallo/p/5890082.html