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 面包屑导航 具体实现
Jun 05 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
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
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
javascript连续赋值问题
2015/07/08 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
使用python 获取进程pid号的方法
2014/03/10 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
python获取本机所有IP地址的方法
2018/12/26 Python
Python微信操控itchat的方法
2019/05/31 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
高中毕业的自我鉴定
2013/12/09 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python