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: '請輸入中文姓名'
                            }
                             
                        }
                    }

後續幾個組件下一篇再記錄了。