Thymeleaf使用bootstrap及其bootstrap相关插件（一）

时间 2019-11-13

标签 thymeleaf 使用 bootstrap 及其相关插件栏目 Bootstarp 繁體版

原文原文链接

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

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

一、bootstrapValidator：表单验证神器前端

二、bootstrap-datetimepicker：时间选择控件jquery

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

四、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的过程当中遇到的问题:ui

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

问题分析：由于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();
        }
    });

结果图：问题得以解决！

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

一、身份证的校验：

 　　　　　　　　　　bs_idno: {
                        validators: {
                            notEmpty: {
                                message: '身份证号不能为空'
                            },                           
                            regexp:{
                                regexp : /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                                message: '请输入有效身份证号'
                            }  
                             
                        }
                    }

二、手机号码的校验：

                bs_phone: {
                        validators: {
                            notEmpty: {
                                message: '手机号码不能为空'
                            },
                            stringLength: {
                                min: 11,
                                max: 11,
                                message: '请输入11位手机号码'
                            },
                            regexp: {
                                regexp: /^1[3|5|8]{1}[0-9]{9}$/,
                                message: '请输入正确的手机号码'
                            }                        
                        }   
                    }

三、中文姓名的校验：

             bs_name: {
                        validators: {
                            notEmpty: {
                                message: '姓名不能为空'
                            },
                            regexp:{
                                regexp : /^[\u4e00-\u9fa5]*$/,
                                message: '请输入中文姓名'
                            }
                             
                        }
                    }

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