如何使用前端校验框架bootstrapValidator

还在手动编写客户端校验代码？前端校验框架bootstrapValidator解放你的双手，分分钟实现客户端输入校验工作。开车！
首先，展示一下校验效果：

如上图所示，当用户登录时，会自动检测是输入账号密码以及验证码。同时还实现了验证码的远程校验，也就是说如果验证码错误，是无法进行登录验证的。
如何实现呢？且看：

step1 下载并引入bootstrapValidator.min.css和bootstrapValidator.min.js

代码如下：

<link rel="stylesheet"  href="${pageContext.request.contextPath}/css/bootstrapValidator.min.css"/>
<script src="${pageContext.request.contextPath}/js/bootstrapValidator.min.js"></script>

step2 在<script>中指定需要校验的表单,并调用bootstrapValidator方法

 //使用bootstrap Validator插件进行登陆账号，密码，验证码的校验
 <script>
        $(function () {
            $('#loginFrom').bootstrapValidator(
			{	
				//指定反馈图标
				feedbackIcons:
				{
					valid: 'glyphicon glyphicon-ok',
					invalid: 'glyphicon glyphicon-remove',
					validating: 'glyphicon glyphicon-refresh'
				},
				//校验域
				fields:
				{	//登录名校验
					loginName:
					{	//校验规则
						validators:
						{	//校验规则：不能为空
							notEmpty:
							{	//如果为空，则提示：...
								message: '登录名不能为空！'
							}
						}
					},
					//密码校验
					password:
					{
						validators:
						{
							notEmpty:
							{
								message: '密码不能为空！'
							}
						}
					},
					//验证码校验
					verificationCode:
					{	//指定触发该校验的最小字符数
                        threshold: 4,
						validators:
						{
							notEmpty:
							{
								message:'请输入验证码！'
							},
							//远程校验，向后端发送请求
							remote:
							{	//请求url
								url:'${pageContext.request.contextPath}/back/verificationCode/check',
								//校验错误时的提示信息（根据返回的map表中键valid的值判断，校验成功为true，校验失败为false）
								message:'验证码错误！'
							}
						}
					}
				}
			});
        });
	</script>

至此，大功告成，告辞！