### 前端驗證
[TOC=4,6]
#### 為什么需要前端驗證
前端驗證是指在瀏覽器端的驗證。前端的驗證主要是為了提升系統的**友好性**，讓用戶第一時間（在提交之前）發現自己輸入數據的錯誤，進而進行改正，而不是等用戶提交以后再返回改正。因為，返回時，用戶輸入的所有數據都會被清空，此時讓用戶重新輸入數據，他們一定會無比頭大！雖然說這種驗證手段看起來也可以提升系統的安全性，但是，由于這種前端驗證時使用JavaScript驗證的，當瀏覽器禁用JS腳本，或者用戶采用其它手段繞過JS的時候，這種驗證就失效了，所以說它是為了**友好性**而生的更為靠譜。而安全性主要靠后端的驗證來實現，我們在后面會講到。
#### 使用的技術
前面已經講過，前端驗證使用的時JavaScript，實時檢測用戶輸入情況，第一時間告知用戶輸入異常，您可以使用原生的Javascript代碼來驗證，當然，現在關于前端驗證的JS插件也是層出不窮，插件即美觀，而且通過簡單的配置就可以完成驗證功能，節省了我們大量的時間。由于我們是圖庫使用的時BootStrap技術，那么我們的驗證也就相應的采用BootStrap驗證插件——**BootStrapValidator**。
#### 前端驗證的實現
BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的輸入驗證，由于本插件完全基于BootStrap因此可以和UI完美的融合在一起。下面直接上圖，看看完成后的結果：
輸入出錯時：
輸入正確時：
怎么樣，還比較和諧把，當然你也可以修改默認樣式，讓它的顯示方式更加美觀。
下面來說說他的用法：
下載BootStrapValidator
你可以http://bv.doc.javake.cn/ 來下載它。
下載后的目錄結構
下載完成后，如果是全部文件的化，目錄結構如下：
其中可以直接在項目中使用的文件都放在dist文件夾中，使用的實例放在demo中，它所依賴的BootStrap以及Jquery文件都放在Vendor文件夾中。
>[info] 如果您項目的BootStrap版本和它所使用的版本不一致，建議使用它的BootStrap文件，否則可能會導致顯示效果出問題（困擾了我好幾天，終于解決了）
下面看看怎么用：
(1)將插件融入當前項目中
根據ThinkPHP5官方教程的建議，將第三方插件放入項目的**Public/Static/Vendor**目錄下，并將插件的文件按類別放置在CSS、JS子文件夾下。Public文件夾一般存放網站的資源文件，而其下的Static文件夾主要用于存放靜態文件，如CSS，js，img圖片等，我們在Static文件夾新建**Vendor**文件夾用于存放第三方插件（主要是前端插件）。項目中目錄結構如下圖所示：
>[danger] 記住，千萬不要在public目錄之外的任何位置放置資源文件，包括application目錄
(2)庫引用
~~~
<link rel="stylesheet" href="__PUBLIC__/static/vendor/bootstrap/css/bootstrap.min.css"/>
<script src="__PUBLIC__/static/js/jquery.min.js"></script>
<script src="__PUBLIC__/static/vendor/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="__PUBLIC__/static/vendor/bootstrapvalidator/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="__PUBLIC__/static/vendor/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
~~~
主要引用了BootStrap的js和css文件，以及BootStrapValidator的js和CSS文件。以上是根據我的項目結構來引用的，當然您可以按照自己的想法來建立目錄。
注意這里使用了`__PUBLLIC__`,ThinkPHP5取消了默認的視圖輸出替換，比如`__APP__`,`__URL__`等變量，老用戶可能使用不習慣。在新版本中，需要用戶自己配置替換輸出，如本項目中在**application\config.php**中配置了`__PUBLIC__`替換規則，代碼如下（dc為項目名稱，本項目并沒有部署在網站發布的根目錄——xampp的htdocs文件夾下，而是在其中的dc文件夾下作為二級目錄）：
~~~
// 視圖輸出字符串內容替換
'view_replace_str' => [
'__PUBLIC__'=>'/dc/public',
'__ROOT__' => '/dc/',
],
~~~
(3)HTML部分
~~~
<div class="row">
<form action="dologin" method="post" id="loginform">
<div class="form-group">
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" placeholder="用戶名" />
</div>
</div>
<div class="form-group">
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control" name="pwd" placeholder="密碼" />
</div>
</div>
<div class="well well-sm" style="text-align:center;">
<input type="radio" name="kind" value="tea"> 老師
<input type="radio" name="kind" value="stu"> 學生
</div>
<button type="submit" class="btn btn-success btn-block">
登錄
</button>
</form>
</div>
~~~
(4)Jquery驗證部分代碼
~~~
$(document).ready(function(){
// 在這里寫你的代碼...
$('#loginform').bootstrapValidator({
message:"您的輸入值不合法",
feedbackIcons:{
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:{
username:{
validators:{
notEmpty:{
message:'用戶名不能為空'
}
}
},
pwd:{
validators:{
notEmpty:{
message:'請輸入密碼'
}
}
}
},
});
});
~~~
好了，到這里就寫完了，當然這里只是一些基本用法，它還有其他更強大的功能，比如異步驗證（和服務器端通信驗證），網上教程很多，這里就不再贅述。