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. Visual Question Answering with Memory-Augmented Networks

    Visual Question Answering with Memory-Augmented Networks 2018-05-15 20:15:03 Motivation: 虽然 VQA 已经取得 ...

  2. SalGAN: Visual saliency prediction with generative adversarial networks

    SalGAN: Visual saliency prediction with generative adversarial networks 2017-03-17 摘要:本文引入了对抗网络的对抗训练 ...

  3. (转载)MySQL基础(非常全)

    MySQL基础 一.MySQL概述 1.什么是数据库 ? 答:数据的仓库,如:在ATM的示例中我们创建了一个 db 目录,称其为数据库 2.什么是 MySQL.Oracle.SQLite.Access ...

  4. Visual studio 离线安装

    VS2017在下载好安装程序安装的时候,会根据你选择的功能模块来下载所需要的安装程序,而这些安装程序的下载位置并不会让你选择,而是直接放在 C:\ProgramData\Microsoft\Visua ...

  5. C语言: 从 CodeBlocks 到 Microsoft Visual Studio 2017

    开学到现在寒假,学习了一个学期的C语言,同时也已然用了大半年的 CodeBlocks 来写 C/C++ 程序.CodeBlocks 是写 C/C++ 语言的程序最轻量的IDE(集成开发环境),在 C ...

  6. UnicodeEncodeError: 'gbk' codec can't encode character '\u25aa' in position 15: illegal multibyte sequence

    UnicodeEncodeError: 'gbk' codec can't encode character '\u25aa' in position 15: illegal multibyte se ...

  7. Java 中常见的各种排序算法汇总

    首先,Java中自已是有排序的 说明:(1)Arrays类中的sort()使用的是“经过调优的快速排序法”;(2)比如int[],double[],char[]等基数据类型的数组,Arrays类之只是 ...

  8. git difftool和mergetool图形化

    1.当然是先安装Beyond Compare3 (此处省略安装步骤,自行百度) 2.设置difftool git config --global diff.tool bc3 git config -- ...

  9. linux学习笔记--程序与进程管理

    .工作管理 1.前台程序放后台程序  命令后 加  & 2.任务执行时将前台任务任务放到后台中并[暂停]  ctr + z 3.jobs 观察后台工作状态 及多少任务在执行,可以通过 help ...

  10. 学大数据是先学java还是先学python?

    大数据的发展趋势日渐明显,但是进入这个领域的门槛不小,除了要有心理准备,其次就是要付诸实际行动中去学习. 学习方法有很多,在没有基础的前提下,自学是因人而异是有难度.其次是大数据目前的工作方向主要是三 ...