Bootstrap表单验证插件bootstrapValidator使用方法整理
文档首页 :
http://bv.doc.javake.cn/api/
$(document).ready(function() {
// 原价、现价同时双验证
$("#original_price").blur(function () {
$("#form_yanzheng").data('bootstrapValidator').resetForm().validateField('price');
});
$("#price").blur(function () {
$("#form_yanzheng").data('bootstrapValidator').resetForm().validateField('original_price');
});
//表单验证
$('#form_yanzheng').bootstrapValidator({
message: '值没有被验证',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
subject: {
message: 'The username is not valid',
trigger: 'blur', //失去焦点就会触发
validators: {
notEmpty: {
message: '商品名称不能为空'
},
stringLength: {
min: 2,
max: 15,
message: '输入字符数量错误'
},
callback: {
message: '商品名称有非法内容',
callback: function () {
var filter = true;
var subject = $("#subject").val();
if (subject.indexOf("储值卡") >= 0) {
filter = false;
}
if (subject.indexOf("充值卡") >= 0) {
filter = false;
}
if (subject.indexOf("会员卡") >= 0) {
filter = false;
}
if (subject.indexOf("vip卡") >= 0) {
filter = false;
}
if (subject.indexOf("打折卡") >= 0) {
filter = false;
}
if (subject.indexOf("年卡") >= 0) {
filter = false;
}
if (subject.indexOf("美容卡") >= 0) {
filter = false;
}
if (subject.indexOf("健身卡") >= 0) {
filter = false;
}
return filter;
}
}
}
},
original_price: {
trigger: 'blur', //失去焦点就会触发
message: 'The username is not valid',
validators: {
notEmpty: {
message: '输入整数或者2位小数'
},
regexp: {
regexp: /^(\d+\.\d{1,2}|\d+)$/,
message: '输入整数或者2位小数'
},
callback: {
message: '原价要大于等于现价',
callback: function () {
var op = $('#original_price').val();
var pp = $('#price').val();
return parseFloat(op) >= parseFloat(pp);
}
}
}
},
price: {
trigger: 'blur', //失去焦点就会触发
message: 'The username is not valid',
validators: {
notEmpty: {
message: '输入整数或者2位小数'
},
regexp: {
regexp: /^(\d+\.\d{1,2}|\d+)$/,
message: '输入整数或者2位小数'
},
callback: {
message: '原价要大于等于现价',
callback: function () {
var op = $('#original_price').val();
var pp = $('#price').val();
return parseFloat(op) >= parseFloat(pp);
}
}
}
},
inventory: {
trigger: 'blur', //失去焦点就会触发
message: 'The username is not valid',
validators: {
notEmpty: {
message: '输入整数或者2位小数'
},
between: {
min: 0,
max: 999999,
message: '输入有效库存数量'
}
}
},
validity_period: {
trigger: 'blur', //失去焦点就会触发
message: 'The username is not valid',
validators: {
notEmpty: {
message: '请正确填写有效天数7-360天'
},
between: {
min: 7,
max: 360,
message: '请合理输入使用有效期'
}
}
}
}
}).on('success.form.bv', function (e) {
var refertype = $('#refertype').val();
var urlpath = "{:U('Index/" + refertype + "')}";
$.ajax({
type: "POST",
url: urlpath,
data: $('#form_yanzheng').serialize(),
dataType: 'json',
success: function (data, statusText, xhr, $form) {
if (data.type == 'true') {
swal({
title: data.info,
text: "",
type: "success",
}, function () {
self.location = "{:U('Index/index')}";
});
} else {
swal(data.info, "", "error");
return false;
}
}
});
});
});
五十个挑花眼的 Twitter Bootstrap 模板(第二部分)
Twitter Bootstrap Bootstrap 是一个基于 HTML,CSS,JAVASCRIPT 的简洁灵活的 网站前端框架及组件包。
BootAdmin – All-In-One Admin Responsive Template
Features
- Online Shop
- Site Pages/ Photo Gallery
- Booking System
- Finance
Supr – Responsive Admin Template
Features
- Fully Responsive Layout
- Build on Twitter Bootstrap
- jQuery Plugins
Conquer – Responsive Admin Dashboard Template
Features
- Clean and Responsive Design
- Fixed Header Layouts
- Friendly code & Template Pages
- 42+ jQuery Plugins
Beoro Admin Responsive Template
Features
- Responsive Layout (Bootstrap Framework)
- HTML5/CSS3
- custom pages, invoice,mailbox, blog, help/faq
- Charts
Start – Metro UI Responsive Admin Template
Features
- Responsive Layout (Bootstrap Framework)
- Beautiful Clean Design
- Plugins Everywhere
- Easy to Adapt
Chromatron HTML5 Admin Backend
Features
- HTML5 syntax & CSS3 markup
- Twitter Bootstrap compatible
- Responsive design
- Fluid grid system
WordPress Bootstrap Themes
Free Roots Theme for WordPress
Features
- Roots WordPress Starter Theme
- HTML5 Boilerplate & Bootstrap
AlYoum | Retina Magazine & Blog WordPress Theme
Features
- 19 Ready Widgets
- 8 Ready HomePage Templates
- Drag and Drop layout builder
- Retina Display Ready
Point Business Responsive WP Theme
Features
- Fully Responsive
- HTML5 & CSS Code
- Woocommerce 2.0.5 Ready
- Drag & Drop GT3 Page Builder
Alterna – Retina Responsive Multi-Purpose WordPress Theme
Features
- Retina-Ready
- Visual Composer page builder
- 5 Header Layout style
- Bootstrap builder
- Layer slider and Revolution Slider
Frenzy Responsive Multi-Purposes Theme
Features
- Fully Responsive
- WooCommerce Compatibility
- Post Formats
Black Label – Fullscreen Video & Image Background
Features
- Fullscreen Video Background Support
- Fullscreen HTML5 Video Background Support
- Fullscreen Images Background Support
- Responsive HTML5 & CSS3
- Retina Display ready
- Audio Background while viewing images
SmartBox – Responsive WordPress Bootstrap Theme
Features
- Responsive Design
- Based on Bootstrap
- Retina Display Ready
- Custom Widgets
BUILDER – Responsive Multi-Purpose Theme
Features
- HTML5 & CSS3 & jQuery
- JQuery Responsive Dropdown menu
- Respinsive Design
One Touch – Multifunctional Metro Stylish Theme
Features
- Fully Responsive WordPress Theme
- Retina Ready
- Google Fonts
- Drag Drop page Builder
Fundraising/Charity Premium WordPress Theme
Features
- Create Cause
- Promote Causes with Landing Page Builder
- Responsive Design
Studiofolio: A Versatile Portfolio and Blog Theme
Features
- Infinite Portifolio and Galleries
- Fluid or Fixed Width Layout
- Custom backgrounds for pages
Blogbold – Responsive Metro Blogmagnews Theme
Features
- Blogbold is Responsive WordPress theme
- layout builder and module
- Developed base on Bootstrap
Quartum Responsive Portfolio WP Theme
Features
- 45+ Custom Shortcodes
- Shortcode Generator
- Translation Ready
- Built with Bootstrap
Knowledge Base – A WordPress Wiki Theme
Features
- Modern Design
- Responsive Layout
- Ajax Based Live Search
- Bult in Twitter Bootstrap
Metro Mobile Premium WordPress Mobile Template
Features
- Metro Style Layout
- Create your own Metro Style
- Camera Slider
- Mobile Detection
Valencia | Responsive WordPress Theme
Features
- Responsive Layout
- Powerful Admin Panel
- Layout Builder
TrustMe – Responsive WordPress Magazine / Blog
Features
- Builtin Review Posts
- Fully Responsive Design
- Ajax Rebuild Thumb
五十个挑花眼的 Twitter Bootstrap 模板(第一部分)
Twitter Bootstrap Bootstrap 是一个基于 HTML,CSS,JAVASCRIPT 的简洁灵活的 网站前端框架及组件包。
Free Bootbusiness
Features
- Twitter Bootstrap version: 2.1.1
- HTML5 & CSS3 with Responsive
- Slider in Home page
- Lightbox in Portfolio page
Free Responsive HTML Template Andia
Features
- Responsive Layout
- 5 Pages: Home, Portfolio, Services, About, Contact
- Responsive Image Slider (Flexslider)
- Filterable Portfolio (jQuery Quicksand and PrettyPhoto)
- AJAX Contact Form with Form Validation
Readable (Free)
Features
- Responsive Layout
- Typography, navbar, buttons, forms and tables
Smashing Theme – Responsive HTML5 Theme
Features
- Responsive
- Retina support
- 250 vector icons
- Contact Form 7 support
- Custom Portfolio
Myway – Onepage Bootstrap Parallax Retina Template
Features
- Fully Responsive
- Parallax Effect
- Retina Ready
- Google Fonts
VALOR – Responsive HTML Template
Features
- HTML5 & CSS3 & jQuery
- Responsive Bootstrap grid
- Filtered portfolio with css3 animations
- Working js/php Contact Form
YellowProject Bootstrap Responsive Template
Features
- Bootstrap Based
- Valid HTML5 & CSS Code
- Responsive Design
- Retina Ready
OHMY! HTML5, CSS3, Bootstrap website template
Features
- HTML5 & CSS3 Bootstrap Based
- 10 color schemes
- 4 sliders and 3 functional widgets
- Fully Responsive
Edge Corporate Web Template
Features
- Fully Responsive
- Incredible design
- Twitter Bootstrap Framework
Xiara – Responsive Onepage Parallax HTML Template
Features
- Contact Form Ready
- Fully Responsive
- Based on Bootstrap
Verendus – Responsive Business Template
Features
- Two Premium Sliders worth $20
- Unlimited Styles
- 22 Layered PSD Files
Joiee – Multipurpose Responsive HTML5 Theme
Features
- Clean, Blod, Responsive
- Retina Ready HTML5 Theme
- suitable for any business
Crafty – Responsive Retina-ready HTML Template
Features
- Fully Responsive
- Retina-Ready template with BootStrap
Viva – HTML5 Responsive Unique Theme
Features
- Fully Responsive on bootstrap
- CSS3 + Sorting Portfolio
oRESUME – Responsive Vcard & Portfolio
Features
- Sortable Portfolio
- Skin Maker
Roy – Responsive Vcard With Facebook Layout
Features
- Twitter Bootstrap
- HTML5 & CSS3
- Unique Design
- Fully Responsive
Night Life Bootstrap Responsive Dark Template
Features
- Fully Responsive
- Background Animation
- Creative Gallery Montage
- Bootstrap Enchanced
Plain Responsive Template
Features
- Responsive HTML5 and CSS3 design
- Based on latest Twitter bootstrap (v2.2.1)
- jQuery 1.7.2
- Support for touch gestures on mobile devices
Jday – Coming Soon page
Features
- Responsive HTML5 and CSS3 design
- Contact Form
- PHP Scripts
- 3D amazing Backgrounds
Greened – Bootstrap Coming Soon Page
Features
- Bootstrap v2.2.1 and Responsive Layout
- Optimized for Ipad and Iphone
- 40 Pattern Background
- FullScreen Slideshow Transition Effects
Caelus – Bootstrap Coming Soon Page
Features
- Built with Bootstrap 2.2.2 and Responsive
- jQuery countdown timer
- CSS3 animated sign up
Charisma – free, responsive admin template
Features
- 9 different themes
- Fully responsive
- Based on Bootstrap
- HTML5 valid and CSS3
MWS Admin – Full Featured Admin Template
Features
- Responsive Layout
- unlimited Colors
- Bootstrap Integration
- jQuery-UI Integration
Boo Admin – Responsive Template
Features
- HTML5/CSS3
- iPad & iPhone Friendly
- Integrated Bootstrap Plugins
Amsterdam – Premium Responsive Admin Template
GitHub托管BootStrap资源汇总
Twitter BootStrap已经火过大江南北,对于无法依赖美工的程序员来说,这一成熟前卫的前端框架简直就一神器,轻轻松松地实现出专业的UI效果。GitHub上相关的的开源项目更是层出不穷,在此整理列举一些感觉不错的组件或增强实现,供大家借鉴。
显示
- MESSENGER
替换alert()消息和其他用户交互通知。 - JQUERY.TOCIFY.JS
可以用Bootstrap或jQueryUI主题的Jquery表格组件。 - BOOTSTRAP-PROMPTS
实现替换alert(), prompt(),confirm()通知的Bootstrap组件。 - SUBNAV FOR BOOTSTRAP 2
一个展示如何在Bootstrap导航菜单中实现SubNavs的例子。 - JQUERY-BOOTSTRAP-SCRIPTING
基于BootStrap实现的JQuery对话框插件。 - BOOTSTRAP-LIGHTBOX
Bootstrap遮罩层(lightbox)对话框实现。 - MENTION.JS
轻量级的实现类似微博@username功能的输入感知插件。 - PINES NOTIFY
Bootstrap或jQuery UI适用的JavaScript通知。 - ACC-WIZARD
基于Bootstrap的“手风琴”排版向导。 - JQUERY-BOOTSTRAP-PAGINATION
一个简单但功能全面的分页组件,基于jQuery,同时支持Bootstrap。 - BANGBANG TAG INPUT
标签(tags)输入提示的JQuery插件。 - TOCIFY
Bootstrap风格的jQuery表格。 - SORICH87/BOOTSTRAP-TOUR
快速构建产品介绍的Bootstrap提示框(类似软件启动时的“每日一问”)。 - BOOTSTRAP-TAGS
顾名思义,Bootstrap标签(tags)功能的实现。 - BOOTSTRAP ARROWS
基于Bootstrap实现各种箭头图标。 - BOOTSTRAP-MODAL
Bootstrap消息提示对话框的扩展。 - PILLBOX FUEL UX
胶囊盒效果,经常用于tags显示与控制。 - DATAGRID FUEL UX
一个可以编辑、搜索、排序的表格组件,非常大方漂亮(Fuel UX的其他扩展也很不错)。 - BOOTMETRO
Windows8的Metro效果实现。 - BOOTSTRAP TOUR
另一款实现网站介绍(“每日一问”等)的Bootstrap提示框。 - JQUERY-SLIMSCROLL
局部带透明滚动条DIV的效果。 - BOOTSTRAP-PROGRESSBAR
多种颜色的Bootstrap进度条(貌似新版Bootstrap已实现此功能)。 - BOOTSTRAP HTML5 VIDEO PLAYER
基于Bootstrap UI的HTML5视频播放器插件。 - BOOTPAG
动态分页功能实现。 - BOOTSTRAP-IMAGE-GALLERY
Bootstrap模态对话框扩展,可用于图片展示站。 - TABLECLOTH.JS
表格扩展,可以进行改变主题、排序等操作。 - PAGEDOWN-BOOTSTRAP
一个简单的即时显示编辑框。 - MENU DROPDOWN ON HOVER PLUGIN
自动展开菜单的下拉菜单实现,可以很好地适应移动设备。 - CSS3 MICROSOFT MODERN BUTTONS
又一款Win8的Metro样式实现。 - LIGHTBOX
遮罩层扩展,可用于图片展示或登录框。 - D3 BOOTSTRAP POPOVERS
BootStrap实现的圆点,可用来表述数值大小。 - TWITTER BOOTSTRAP NOTIFICATIONS, FROM NIJIKO YONSKAI
提示框扩展。 - BOOTBOX.JS – ALERT, CONFIRM AND FLEXIBLE DIALOGS FOR TWITTER’S BOOTSTRAP FRAMEWORK
Bootbox.js是一个小巧的JavaScript库,允许你生成一个程序化的对话框.
表单
- BOOTSTRAP-ACKNOWLEDGEINPUTS
带验证提示的输入框改进。 - TREE.JS
出自FUEL UX的树形列表组件。 - WIZARD.JS
出自FUEL UX的step by step导航条。 - MAGICSUGGEST
具有联想功能的输入框,可用于搜索提示。 - BOOTSTRAP-DUALLISTBOX
Bootstrap实现的双重列表框组件(左右栏内容移动),适用于移动设备。 - JQUERY-SIMPLECOLORPICKER
jQuery颜色选择(吸管)功能。 - TWBOOTSTRAPJQVALPOPOVER
Bootstrap提示框实现Jquery验证提示 - BOOTSTRAP-WYSIHTML5-RAILS
一款基于Bootstrap的“所见即所得”在线编辑器。 - MY-BOOTSTRAP-DATETIMEPICKER
漂亮的日期/时间选择组件 - GOOGLE FONT SELECT
基于Google Font API的文字选择下拉框 - BOOTSTRAP-DATETIMEPICKER
又一款不错的日期选择组件 - BOOTSTRAP-MULTISELECT
基于JQuery的多选下拉菜单组件 - JQRANGESLIDER
范围滑动选择的jQuery插件 - JASNY BOOTSTRAP
Bootstrap扩展,增强了很多功能,如输入框、表单、图标等,值得一看。 - JQUERY-ADDRESSPICKER
地址选择输入框(支持google maps)。 - JQUERY FILE UPLOAD DEMO
JQuery文件上传组件,支持多文件选取和进度条。 - BOOTSTRAP CONTEXTMENU
基于BootStrap实现的右键菜单。 - SELECTBOXIT
BootStrap下拉菜单美化改进 - SPINNER – FUEL UX
数字输入框 - SEARCH FUEL UX
搜索框 - BOOTSTRAP-WYSIHTML5
支持HTML5的“所见即所得”在线编辑器 - SELECTBOX FORM HELPER
下拉菜单增强美化 - TYPEAHEAD EXTENSION
支持json数据回调的下拉菜单增强 - FINE UPLOADER
一款界面友好的上传组件。 - X-EDITABLE
点击链接即可编辑的编辑组件(结合ajax实现页面无刷新)。 - JQBOOTSTRAPVALIDATION
BootStrap可用的JQuery验证插件。 - PRETTYCHECKABLE
美化默认的单选和多选选择框。 - CHOSEN-LESS-BOOTSTRAP
美化选择组件,如下拉菜单,输入框等。 - BOOTSTRAP AJAX
基于Ajax的快速输入框 - BOOTSTRAP TOGGLE BUTTONS
ON/OFF切换,类似IOS上的UI风格
输入
- TIMEPICKER
界面很新颖的时间选择组件 - COMBOBOX FUEL UX
FUEL UX出品的美化下拉菜单 - TIMEZONE FORM HELPERS
时区选择下拉菜单 - LANGUAGES FORM HELPER
语言选择下拉菜单 - PHONE FORM HELPER
手机号码输入框 - COUNTRIES FORM HELPER
国家选择下拉菜单 - DATE RANGE PICKER
日期段选择组件 - DATEPICKER FOR BOOTSTRAP
日期选择组件 - COLORPICKER FOR BOOTSTRAP
又一款颜色选择器(吸管),效果很棒。