Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

在完成信息录入界面中使用到了Thymeleaf+bootstrap组合，bootstrap自带的栅格系统在布局方面使用起来方便，提供的样式、组件也很多，在完善这个信息表单的过程中，想重点介绍以下几个基于bootstrap的插件。

1、bootstrapValidator：表单验证神器

2、bootstrap-datetimepicker：时间选择控件

3、bootstrap-select：下拉选择控件

4、toastr ： 提示信息组件

使用这些控件需要在thymeleaf页面中引入如下（这些css、jss文件可到相应官网下载）

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <title>信息登记</title>  

    <link th:href="@{/Bootstrap/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />

    <link th:href="@{/Bootstrap/bootstrapvalidator/css/bootstrapValidator.min.css}" rel="stylesheet" />

    <link th:href="@{/Bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css}" rel="stylesheet" />

    <link th:href="@{/Bootstrap/bootstrap-select/css/bootstrap-select.min.css}" rel="stylesheet" />

    <link th:href="@{/Bootstrap/bootstrap-toastr/css/toastr.min.css}" rel="stylesheet" />  

    <script th:src="@{/js/jquery-3.2.1.min.js}"></script>

    <script th:src="@{/Bootstrap/bootstrap/js/bootstrap.min.js}"></script>

    <script th:src="@{/Bootstrap/bootstrapvalidator/js/bootstrapValidator.min.js}"></script>

    <script th:src="@{/Bootstrap/bootstrapvalidator/js/language/zh_CN.js}"></script>

    <script th:src="@{/Bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js}"></script>

    <script th:src="@{/Bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js}"></script>

    <script th:src="@{/Bootstrap/bootstrap-select/js/bootstrap-select.min.js}"></script>

    <script th:src="@{/Bootstrap/bootstrap-select/js/i18n/defaults-zh_CN.min.js}"></script>

    <script th:src="@{/Bootstrap/bootstrap-toastr/js/toastr.min.js}"></script> 

</head>

首先是bootstrapValidator使用，可参考http://blog.csdn.net/u013938465/article/details/53507109，有非常详细的使用介绍。

说下在使用bootstrapValidator的过程中遇到的问题:

当表单属性过多需要每行并列多个属性 ，会出现校验第一个属性，发现整行被校验的效果 ，这不是我们工作想要的效果。如图：

问题分析：因为bootstrapValidator默认情况是根据form-group样式验证提示，若我们代码中将同行显示属性放在一个form-group中，就会出现该问题，那么怎么解决呢 ，lz仔细阅读了该插件官网，发现存在group属性，其值默认为“.form-group”，该属性便是官方提供的在多个属性分组情况使用。

解决方案：首先html修改代码，注意增加了<div class="rowGroup">

<div class="form-group">

    **<div class="rowGroup">**

        <label class="col-md-2 control-label">供应商编号：</label>

        <div class="col-md-2">

        <input type="text" class="form-control" id="code" name="code"  value = "" >

    </div>

</div>

<div class="rowGroup">

        <label class="col-md-2 control-label">供应商名称：</label>

        <div class="col-md-2">

            <input type="text" class="form-control" id="name" name="name"  value="">

        </div>

</div>

<div class="rowGroup">

        <label class="col-md-2 control-label">供应商类型：</label>

        <div class="col-md-2">

        <select class="show-tick form-control" data-live-search="true" id="type" name="type">

        </select>

    </div>

    </div>

</div>

JS修改代码:

$('#supplierForm').bootstrapValidator({

        container: 'tooltip',

        group: '.rowGroup',

        message : '数据错误',

        excluded: ':disabled',

        feedbackIcons: {

            valid: 'fa fa-check',

            invalid: 'fa fa-times',

            validating: 'fa fa-refresh'

        },

        fields: {

            code: {

                validators: {

                    notEmpty: {

                        message: '供应商编号为空'

                    },

                },

            },

            //其他属性略

        },

        submitHandler: function (validator, form, submitButton) {

            validator.defaultSubmit();

        }

    });

结果图： 问题得以解决！

这边记录一下特殊的校验方式：

1、身份证的校验：

 　　　　　　　　　　bs_idno: {

                        validators: {

                            notEmpty: {

                                message: '身份证号不能为空'

                            },

                            regexp:{

                                regexp : /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,

                                message: '请输入有效身份证号'

                            }  

                        }

                    }

2、手机号码的校验：

                bs_phone: {

                        validators: {

                            notEmpty: {

                                message: '手机号码不能为空'

                            },

                            stringLength: {

                                min: 11,

                                max: 11,

                                message: '请输入11位手机号码'

                            },

                            regexp: {

                                regexp: /^1[3|5|8]{1}[0-9]{9}$/,

                                message: '请输入正确的手机号码'

                            }

                        }

                    }

3、中文姓名的校验：

             bs_name: {

                        validators: {

                            notEmpty: {

                                message: '姓名不能为空'

                            },

                            regexp:{

                                regexp : /^[\u4e00-\u9fa5]*$/,

                                message: '请输入中文姓名'

                            }

                        }

                    }

后续几个组件下一篇再记录了。

Thymeleaf使用bootstrap及其bootstrap相关插件（一）的更多相关文章

  1. Bootstrap表单验证插件bootstrapValidator使用方法整理

    插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...

  2. [bootstrap] bootstrap 简介和相关网址

    Bootstrap 来自 Twitter,是目前很受欢迎的前端框架. 基于 HTML.CSS.JAVASCRIPT ,简洁灵活,使 Web 开发更加快捷. Bootstrap提供了优雅的HTML和CS ...

  3. 【转】bootstrap 的 affix.js 插件

    我觉得 Twitter Bootstrap 提供的 JavaScript 插件可用性非常高,但文档多数简单.按部就班操作了,有效果当然好,没效果的话简直不知道为什么.之前我写过 Scrollspy 用 ...

  4. 【Bootstrap】优秀小插件收集

    Bootstrap中不乏很多优秀的小插件来让界面更加漂亮.比如之前做过笔记的bootstrap-fileinput,select2,datetimepicker等都是属于这一系列的.这些相对而言比较大 ...

  5. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  6. Bootstrap支持的JavaScript插件

    1.导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaSc ...

  7. Bootstrap的js分页插件属性介绍

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定 制,提供了公共的方法可随时获得插件状 ...

  8. 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...

  9. bootstrap 支持的JavaScript插件

    一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使 ...

随机推荐

  1. module.exports 与 exports

    module.exports 与 exports 注意:1 对于要导出的属性,可以简单直接挂到 exports 对象上2 对于类,为了直接使导出的内容作为类的构造器可以让调用者使用 new 操作符创建 ...

  2. 【BZOJ 5125】小Q的书架

    Problem Description 小 \(Q\) 有 \(n\) 本书,每本书有一个独一无二的编号,现在它们正零乱地在地上排成了一排. 小 \(Q\) 希望把这一排书分成恰好 \(k\) 段,使 ...

  3. Windows系统零开始前端开发环境配置

    1. 安装nodejs 国内下载页面(推荐) 官网下载页面 现在的nodejs自带NPM,只需点击下一步下一步安装即可. 为了加速国内NPM包下载,可配置淘宝NPM镜像 2. 安装git 国内下载页面 ...

  4. codeforces 15C. Industrial Nim

    题目链接:http://codeforces.com/problemset/problem/15/C $NIM$游戏是次要的,直接异或石头堆就可以了,问题在于给出的石头堆的数量极多. 考虑利用异或的性 ...

  5. idea中git pull push需要反复输入密码

    在使用idea开发的过程中,在终端terminal中git pull和git push时遇到一个问题,一个是 每次提交都需要输入用户名和密码,,从网上找了下解决方案,记录一下. 解决: 打开git终端 ...

  6. IDEA 的Class not found: "..."Empty test suite

    Junit测试的时候出现  IDEA 的Class not found: "..."Empty test suite问题. 尝试一下解决方法: 第一种方法: 1.modules&g ...

  7. c代码，输出i,j,k互不相同的三位数

    #include <stdio.h> int main() { int i,j,k; printf("\n"); for(i=1;i<5;i++){ for(j= ...

  8. CentOS6.5下卸载自带的MySQL数据库安装MySQL5.6

    1)查看CentOS自带的mysql 输入 rpm -qa | grep mysql mysql-libs-5.1.71-1.el6.x86_64 2)将其自带的mysql版本全部卸载(非常重要,如不 ...

  9. maven 打包不同环境

    支持不同环境打包 1 pom添加如下配置: 1)添加指定打包id 区分各个环境 <profiles> <profile> <id>dev</id> &l ...

  10. Integer的最大值

    来自:https://blog.csdn.net/qq_33611068/article/details/77369050 有这样一道题: 编程测试,遍历 0 到 int所能表示最大的正数,将消耗的时 ...