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

前端之家收集整理的这篇文章主要介绍了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地址:

callback方式可以让您自定义函数用于判断,下面看个例子

HTML(内容就是显示输入运算结果)

来看看JS

$(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; } } } } } }); });

这样当默认的方式不能满足您的要求的时候就可以用callback方式,自己实现函数用于完成特殊的判断,比如判断中国居民身份证号是否正确……

四、异步验证

最常见的应用就是验证用户名是否注册过,下面看我的程序中的代码

HTML

Feedback has-error">
登录用的用户名">

JS

$(function () { $('form').bootstrapValidator({ message: 'This value is not valid',FeedbackIcons: { valid: 'glyphicon glyphicon-ok',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'//请求方式 } } } } }); });

Action 用 SpringMvc实现

输出为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最终输出的一定是下面形式的文本:

所以才使用JSONObject做为输出

以上所述是小编给大家介绍的BootStrap-validator 使用记录(JAVA SpringMVC实现)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/springmvc/45694.html

猜你在找的SpringMVC相关文章