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


Posted in Javascript onSeptember 21, 2016

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="//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/

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

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

三、进阶应用

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

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实现),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery 切换不同图片示例代码
Dec 05 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 #Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 #Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 #Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 #Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 #Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 #Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 #Javascript
You might like
西德产收音机
2021/03/01 无线电
PHP自动更新新闻DIY
2006/10/09 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
Javascript 解疑
2009/11/11 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
Python读写Excel文件方法介绍
2014/11/22 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
一些PHP的面试题
2015/05/06 面试题
什么是聚集索引和非聚集索引
2012/01/17 面试题
最新茶叶店创业计划书
2014/01/14 职场文书
小学语文国培感言
2014/03/04 职场文书
产品推广策划方案
2014/05/10 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
web前端之css水平居中代码解析
2021/05/20 HTML / CSS