BootStrap与validator 使用笔记(JAVA SpringMVC实现)

BootStrap 是一个强大的前面框架,它用优雅的方式解决了网页问题。最近正在使用其开发网站的表单验证,一点体会记录如下:

注:本文中借鉴了博客Franson 的文章使用bootstrap validator的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="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Bootstrap Validator JS文件 -->
<script src="https://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="https://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/

其中几个常用的,提一下,其实一看就懂,很好理解:

三、进阶应用

如果不想用默认的模板,可以使用以下个方式来进行一些自定义验证

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

以上所述是小编给大家介绍的BootStrap-validator 使用记录(JAVA SpringMVC实现),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • JSP中springmvc配置validator的注意事项

    SpringMVC介绍之Validation 对于任何一个应用而言在客户端做的数据有效性验证都不是安全有效的,这时候就要求我们在开发的时候在服务端也对数据的有效性进行验证.SpringMVC自身对数据在服务端的校验有一个比较好的支持,它能将我们提交到服务端的数据按照我们事先的约定进行数据有效性验证,对于不合格的数据信息SpringMVC会把它保存在错误对象中,这些错误信息我们也可以通过SpringMVC提供的标签在前端JSP页面上进行展示. 关于springmvc配置validator的注意事项

  • springmvc的validator数据校验的实现示例代码

    一.什么是数据校验? 这个比较好理解,就是用来验证客户输入的数据是否合法,比如客户登录时,用户名不能为空,或者不能超出指定长度等要求,这就叫做数据校验. 数据校验分为客户端校验和服务端校验 客户端校验:js校验 服务端校验:springmvc使用validation校验,struts2使用validation校验.都有自己的一套校验规则. 二.springmvc的validation校验 Springmvc本身没有校验功能,它使用hibernate的校验框架,hibernate的校验框架和orm

  • SpringMVC Validator验证示例

    SpringMVC服务器验证一种是有两种方式,一种是基于Validator接口,一种是使用Annotaion JSR-303标准的验证,下面主要是学习这两种,工作中推荐后者,方便很多 一.基于Validator接口的验证. 首先创建User实例,并加入几个属性 public class User { private String username; private String password; private String nickname; public String getUsernam

  • BootStrap与validator 使用笔记(JAVA SpringMVC实现)

    BootStrap 是一个强大的前面框架,它用优雅的方式解决了网页问题.最近正在使用其开发网站的表单验证,一点体会记录如下: 注:本文中借鉴了博客Franson 的文章使用bootstrap validator的remote验证代码经验分享(推荐) 一.准备工作 1.你的网站环境中要有 BootStrap,中文网地址:http://www.bootcss.com/ 2.下载BootStrap Validator相关材料,地址:http://bv.doc.javake.cn/ 当然,如果你不想一个

  • Java SpringMVC自学自讲

    目录 SpringMVC 参考博客 MVC SpringMVC 概述 SpringMVC优点 创建maven工程 配置web.xml 创建请求控制器 创建springMVC的配置文件 测试HelloWorld 总结 @RequestMapping注解 @RequestMapping注解的params属性(了解) @RequestMapping注解的headers属性(了解) SpringMVC支持路径中的占位符(重点) @RequestParam @RequestHeader @CookieVa

  • Bootstrap源码学习笔记之bootstrap进度条

    基本样式 要实现进度条效果要使用两个容器,外容器使用"progress"样式,子容器使用"progress-bar"样式.例如: <div class="progress"> <div class="progress-bar" style="width:40%"></div> </div> progress样式主要设置进度条容器的背景色,容器高度.间距等,pr

  • Java SpringMVC实现PC端网页微信扫码支付(完整版)

    一:前期微信支付扫盲知识 前提条件是已经有申请了微信支付功能的公众号,然后我们需要得到公众号APPID和微信商户号,这个分别在微信公众号和微信支付商家平台上面可以发现.其实在你申请成功支付功能之后,微信会通过邮件把Mail转给你的,有了这些信息之后,我们就可以去微信支付服务支持页面:https://pay.weixin.qq.com/service_provider/index.shtml 打开这个页面,点击右上方的链接[开发文档]会进入到API文档说明页面,看起来如下 选择红色圆圈的扫码支付就

  • java springmvc 注册中央调度器代码解析

    这篇文章主要介绍了java springmvc 注册中央调度器代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在WEB-INF下的web.xml中配置 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="htt

  • Java SpringMVC拦截器与异常处理机制详解分析

    目录 拦截器(interceptor)的作用 拦截器快速入门 案例:用户登录权限控制 拦截器方法说明 SpringMVC异常处理 异常处理的思路 异常处理两种方式 拦截器(interceptor)的作用 Spring MVC的拦截器类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理. 将拦截器按一定的顺序联结成一条链,这条链称为拦截器链(Interceptor Chain).在访问被拦截的方法或字段时,拦截器链中的拦截器就会按其之前定义的顺序被调用.拦截器也是AOP思

  • java SpringMvc中拦截器的应用

    目录 什么是拦截器 基本使用 实例 总结 什么是拦截器 拦截器(Interceptor)是SpringMVC中的组件.可以使很多个请求被处理时,都会执行拦截器中的代码.拦截器可以选择阻止执行或放行. 举个栗子: 基本使用 在SpringMVC中实现HandlerInteceptor拦截器接口,这个类就是一个拦截器类. 利用拦截器最核心的在用控制preHandle方法的返回值,返回true就成功了,返回false就表示进行拦截处理了. 实例 首先,创建一个类继承拦截器 public class D

  • Java SpringMVC数据响应超详细讲解

    目录 1)页面跳转   2)回写数据 3)配置注解驱动 4)知识要点 1)页面跳转   直接返回字符串:此种方式会将返回的字符串与视图解析器的前后缀拼接后跳转.  返回带有前缀的字符串: 转发: forward:/WEB-INF/views/index.jsp 重定向: redirect:/index.jsp 通过ModelAndView对象返回 @RequestMapping("/quick2") public ModelAndView quickMethod2(){ ModelAn

  • java SpringMVC学习使用详解

    Controller学习(Spring官网) SpringMVC 标记 某些java代码使其成为Controller,从而这些代码具有和前端网页 交互数据的功能了. 在学习controller之前先把SpringMVC大致捋一下: 一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ,然后再把该Model 返回给对应的View 进行展示.在SpringMVC 中提供

  • 整理关于Bootstrap排版的慕课笔记

    整理自慕课笔记 GitHub上这样介绍 bootstrap: 简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集. 基于html5.css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档. 自定义JQuery插件,完整的类库,基于Less等. 标题 主标题 Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,

随机推荐