### 前端验证
[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:'请输入密码'
}
}
}
},
});
});
~~~
好了，到这里就写完了，当然这里只是一些基本用法，它还有其他更强大的功能，比如异步验证（和服务器端通信验证），网上教程很多，这里就不再赘述。