Spring
发布时间：2019-10-07 发布网站：大佬教程 code.js-code.com
大佬教程 收集整理的这篇文章主要介绍了BootStrap与validator 使用笔记(JAVA SpringMVC实现) ，大佬教程 大佬觉得挺不错的，现在分享给大家，也给大家做个参考。BootStrap 是一个强大的前面框架，它用优雅的方式解决了网页问题。最近正在使用其开发网站的表单验证，一点体会记录如下：
注：本文中借鉴了博客Franson 的文章
一、准备工作
1.你的网站环境中要有 BootStrap，中文网地址：
2.下载BootStrap Validator相关材料，地址：
当然，如果你不想一个一个下载到您的项目中的话，可以引入CDN，CDN可以用bootstrap官方的，也可以百度上搜索下“BootStrap CDN”，你一定可以理解是怎么使用。下面是我的引入代码：
二、初步应用。
这里直接引用BootStrap Validator 官方的例子，先看HTML代码：
一段很普通的BootStrap网页代码，一个表单，里面是用户名，邮箱地址二个INPUT
BootStrap验证是根据表单控件的name值进行检验的，下面是JS代码：
$(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'
}
}
}
}
});
});
BootStrap Validator 已经定义好很多验证方式，每一种方式的用法参见：http://bv.doc.javake.cn/validators/
其中几个常用的，提一下，其实一看就懂，很好理解：
三、进阶应用
如果不想用默认的模板，可以使用以下个方式来进行一些自定义验证
callback方式，API地址：
callBAC k方式可以让您自定义函数用于判断，下面看个例子
HTML(内容就是显示输入运算结果)
来看看JS
$(document).ready(function()
{
// 随机取min,max中间的一个数
function random
numb er(min,ma
X) {
return Math.floor(Math.random() * (max - min + 1) + min
);
};
// 生成随机两个数相加的文字显示内容，显示到capchaOperation中去
$('#captchaOperation').html([random
numb er(1,100),'+',random
numb er(1,200),'='].join(' ')
);
$('#captchaForm')
.b ootstrapValidator(
{ //验证
feed
BAC kIcons:
{
valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',valida
Tin g: 'glyphicon glyphicon-@R_
944 _7017@h'
},fields:
{
captcha:
{
validators:
{
call
BAC k:
{ //call
BAC k方式
messa ge: 'Wrong answer',call
BAC k: function(value,validator)
{ //您可以在这里实现自定义功能
// Determine
the number s which are generated in captchaOperation //这里面value就是input里输入的值 var items = $('#captchaOperation').html().split(' '),sum = parseInt(items
[0] ) + parseInt(items[2]
);
return value == sum;
}
}
}
}
}
}
);
}
);
这样当默认的方式不能满足您的要求的时候就可以用callBAC k方式，自己实现函数用于完成特殊的判断，比如判断中国居民身份证号是否正确……
四、异步验证
最常见的应用就是验证用户名是否注册过，下面看我的程序中的代码：
HTML
JS
$(function ()
{
$('form')
.b ootstrapValidator(
{
messa ge: 'This value is not valid',feed
BAC kIcons:
{
valid: 'glyphicon glyphicon-ok',valida
Tin g: 'glyphicon glyphicon-@R_
944 _7017@h'},fields:
{
loginName:
{
messa ge: '用户名验证失败',validators:
{
notEmpty:
{ messa ge: '用户名不能为空'},
Stri ngLength:
{ min: 6,max: 18,
messa ge: '用户名长度必须在6到18位之间'},regexp:
{ regexp: /^[a-zA-Z
0-9 _]+$/,
messa ge: '用户名只能包含大写、小写、数字和下划线'},remote:
{
messa ge: '用户名已经存在',url: '/ajax/
chec knewuser',//Action的地址，这里
我试 过，应该是不能加入EL，但网上看到可以加<%=%>输出某个值，
我试 验没成功，不知道为什么
data:
{ //传参数
username:function()
{ return $("#loginName").val()},//username参数名，不用引号，如果想传入特定控件的值一定加入function,这样才能把值传入，不知道为什么……
},delay : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST'//请求方式
}
}
}
}
}
);
}
);
Action 用 SpringMvc实现
m.aocshallo.action
s. ajax;
import java.io.IOException;
import javax.servlet.
http .
http Servlet
requ est;
import javax.servlet.
http .
http ServletResponse;
import javax.servlet.
http .
http Session;
import org.json.JSONOb
je ct;
import org.springframework.stereotype.Controller;
import org.springframework.web
.b ind.
Ann otation.
requ estMapping;
@Controller
@
requ estMapping("/ajax")
public class AjaxAction extends BaseAction
{
public AjaxAction()
{
// TODO Auto-generated constructor
stu b
}
@
requ estMapping("/
chec knewuser")
public void
chec kNewUser(
http Session session,
http Servlet
requ est
requ est,
http ServletResponse respons
E) throws IOException
{
//。。。。 这是您的判断逻辑
Boole an ret = true; // 这是最终返回值
//下面是response的设置
response.setContentType("text/xml;charset=utf-8"
);
response.setHeader("Cache-Control","no-cache"
);
try
{
//这是输出为JSON串的一种方式，结果应为JSON串，属性名一定是valid，值为true或
fal se
JSONOb
je ct jsobj
CET = new JSONOb
je ct(
);
jsobj
CET .put("valid",ret
);
response.getWriter().write(jsobj
CET .to
Stri ng()
);
//Syste
m. out.println(jsobj
CET .to
Stri ng()
);
} catch (IOException
E) {
e.printStackTrace(
);
}
}
}
您的Action最终输出的一定是下面形式的文本：
{"valid":
fal s
E} //表示不合法，验证不通过
{ "valid":tru
E} //表示合法，验证通过
所以才使用JSONObje ct做为输出。
以上所述是小编给大家介绍的BootStrap-validator 使用记录(JAVA SpringMVC实现)。菜鸟教程 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得菜鸟教程不错，可分享给好友！感谢支持。
大佬总结
以上是大佬教程 为你收集整理的BootStrap与validator 使用笔记(JAVA SpringMVC实现) 全部内容，希望文章能够帮你解决BootStrap与validator 使用笔记(JAVA SpringMVC实现) 所遇到的程序开发问题。
如果觉得大佬教程 网站内容还不错，欢迎将大佬教程 推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
