竹磬网-邵珠庆の日记 生命只有一次,你可以用它来做些更多伟大的事情–Make the world a little better and easier


257月/160

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

29月/130

五十个挑花眼的 Twitter Bootstrap 模板(第二部分)

发布在 邵珠庆

Twitter Bootstrap Bootstrap 是一个基于 HTML,CSS,JAVASCRIPT 的简洁灵活的 网站前端框架及组件包。

BootAdmin – All-In-One Admin Responsive Template

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Online Shop
  • Site Pages/ Photo Gallery
  • Booking System
  • Finance

Supr – Responsive Admin Template

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Fully Responsive Layout
  • Build on Twitter Bootstrap
  • jQuery Plugins

Conquer – Responsive Admin Dashboard Template

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Clean and Responsive Design
  • Fixed Header Layouts
  • Friendly code & Template Pages
  • 42+ jQuery Plugins

Beoro Admin Responsive Template

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Responsive Layout (Bootstrap Framework)
  • HTML5/CSS3
  • custom pages, invoice,mailbox, blog, help/faq
  • Charts

Start – Metro UI Responsive Admin Template

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Responsive Layout (Bootstrap Framework)
  • Beautiful Clean Design
  • Plugins Everywhere
  • Easy to Adapt

Chromatron HTML5 Admin Backend

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • HTML5 syntax & CSS3 markup
  • Twitter Bootstrap compatible
  • Responsive design
  • Fluid grid system

WordPress Bootstrap Themes

Free Roots Theme for WordPress

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Roots WordPress Starter Theme
  • HTML5 Boilerplate & Bootstrap

AlYoum | Retina Magazine & Blog WordPress Theme

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • 19 Ready Widgets
  • 8 Ready HomePage Templates
  • Drag and Drop layout builder
  • Retina Display Ready

Point Business Responsive WP Theme

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Fully Responsive
  • HTML5 & CSS Code
  • Woocommerce 2.0.5 Ready
  • Drag & Drop GT3 Page Builder

Alterna – Retina Responsive Multi-Purpose WordPress Theme

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Retina-Ready
  • Visual Composer page builder
  • 5 Header Layout style
  • Bootstrap builder
  • Layer slider and Revolution Slider

Frenzy Responsive Multi-Purposes Theme

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Fully Responsive
  • WooCommerce Compatibility
  • Post Formats

Black Label – Fullscreen Video & Image Background

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

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

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Responsive Design
  • Based on Bootstrap
  • Retina Display Ready
  • Custom Widgets

BUILDER – Responsive Multi-Purpose Theme

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • HTML5 & CSS3 & jQuery
  • JQuery Responsive Dropdown menu
  • Respinsive Design

One Touch – Multifunctional Metro Stylish Theme

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Fully Responsive WordPress Theme
  • Retina Ready
  • Google Fonts
  • Drag Drop page Builder

Fundraising/Charity Premium WordPress Theme

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Create Cause
  • Promote Causes with Landing Page Builder
  • Responsive Design

Studiofolio: A Versatile Portfolio and Blog Theme

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Infinite Portifolio and Galleries
  • Fluid or Fixed Width Layout
  • Custom backgrounds for pages

Blogbold – Responsive Metro Blogmagnews Theme

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Blogbold is Responsive WordPress theme
  • layout builder and module
  • Developed base on Bootstrap

Quartum Responsive Portfolio WP Theme

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • 45+ Custom Shortcodes
  • Shortcode Generator
  • Translation Ready
  • Built with Bootstrap

Knowledge Base – A WordPress Wiki Theme

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Modern Design
  • Responsive Layout
  • Ajax Based Live Search
  • Bult in Twitter Bootstrap

Metro Mobile Premium WordPress Mobile Template

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Metro Style Layout
  • Create your own Metro Style
  • Camera Slider
  • Mobile Detection

Valencia | Responsive WordPress Theme

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Responsive Layout
  • Powerful Admin Panel
  • Layout Builder

TrustMe – Responsive WordPress Magazine / Blog

50 个让你挑花眼的 Twitter Bootstrap 模板(第二部分)

Features

  • Builtin Review Posts
  • Fully Responsive Design
  • Ajax Rebuild Thumb
29月/131

五十个挑花眼的 Twitter Bootstrap 模板(第一部分)

发布在 邵珠庆

Twitter Bootstrap Bootstrap 是一个基于 HTML,CSS,JAVASCRIPT 的简洁灵活的 网站前端框架及组件包。

Free Bootbusiness

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Twitter Bootstrap version: 2.1.1
  • HTML5 & CSS3 with Responsive
  • Slider in Home page
  • Lightbox in Portfolio page

Free Responsive HTML Template Andia

50 个让你挑花眼的 Twitter Bootstrap 模板

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)

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Responsive Layout
  • Typography, navbar, buttons, forms and tables

Smashing Theme – Responsive HTML5 Theme

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Responsive
  • Retina support
  • 250 vector icons
  • Contact Form 7 support
  • Custom Portfolio

Myway – Onepage Bootstrap Parallax Retina Template

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Fully Responsive
  • Parallax Effect
  • Retina Ready
  • Google Fonts

VALOR – Responsive HTML Template

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • HTML5 & CSS3 & jQuery
  • Responsive Bootstrap grid
  • Filtered portfolio with css3 animations
  • Working js/php Contact Form

YellowProject Bootstrap Responsive Template

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Bootstrap Based
  • Valid HTML5 & CSS Code
  • Responsive Design
  • Retina Ready

OHMY! HTML5, CSS3, Bootstrap website template

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • HTML5 & CSS3 Bootstrap Based
  • 10 color schemes
  • 4 sliders and 3 functional widgets
  • Fully Responsive

Edge Corporate Web Template

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Fully Responsive
  • Incredible design
  • Twitter Bootstrap Framework

Xiara – Responsive Onepage Parallax HTML Template

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Contact Form Ready
  • Fully Responsive
  • Based on Bootstrap

Verendus – Responsive Business Template

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Two Premium Sliders worth $20
  • Unlimited Styles
  • 22 Layered PSD Files

Joiee – Multipurpose Responsive HTML5 Theme

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Clean, Blod, Responsive
  • Retina Ready HTML5 Theme
  • suitable for any business

Crafty – Responsive Retina-ready HTML Template

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Fully Responsive
  • Retina-Ready template with BootStrap

Viva – HTML5 Responsive Unique Theme

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Fully Responsive on bootstrap
  • CSS3 + Sorting Portfolio

oRESUME – Responsive Vcard & Portfolio

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Sortable Portfolio
  • Skin Maker

Roy – Responsive Vcard With Facebook Layout

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Twitter Bootstrap
  • HTML5 & CSS3
  • Unique Design
  • Fully Responsive

Night Life Bootstrap Responsive Dark Template

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Fully Responsive
  • Background Animation
  • Creative Gallery Montage
  • Bootstrap Enchanced

Plain Responsive Template

50 个让你挑花眼的 Twitter Bootstrap 模板

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

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Responsive HTML5 and CSS3 design
  • Contact Form
  • PHP Scripts
  • 3D amazing Backgrounds

Greened – Bootstrap Coming Soon Page

50 个让你挑花眼的 Twitter Bootstrap 模板

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

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Built with Bootstrap 2.2.2 and Responsive
  • jQuery countdown timer
  • CSS3 animated sign up

Charisma – free, responsive admin template

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • 9 different themes
  • Fully responsive
  • Based on Bootstrap
  • HTML5 valid and CSS3

MWS Admin – Full Featured Admin Template

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • Responsive Layout
  • unlimited Colors
  • Bootstrap Integration
  • jQuery-UI Integration

Boo Admin – Responsive Template

50 个让你挑花眼的 Twitter Bootstrap 模板

Features

  • HTML5/CSS3
  • iPad & iPhone Friendly
  • Integrated Bootstrap Plugins

Amsterdam – Premium Responsive Admin Template

50 个让你挑花眼的 Twitter Bootstrap 模板

297月/130

GitHub托管BootStrap资源汇总

发布在 邵珠庆

 

Twitter BootStrap已经火过大江南北,对于无法依赖美工的程序员来说,这一成熟前卫的前端框架简直就一神器,轻轻松松地实现出专业的UI效果。GitHub上相关的的开源项目更是层出不穷,在此整理列举一些感觉不错的组件或增强实现,供大家借鉴。

 

显示

表单

输入