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: '請輸入中文姓名'
}
}
}
后續幾個組件下一篇再記錄了。