Bootstrap：bootstrapValidator表单自定义验证

1、Bootstrap：Form 表单

在WEB开发过程中，经常遇到需要做表单提交，良好的提示增加用户体验感。在Bootstrap UI使用表单验证，构建登录界面。

2、Bootstrap：引用相关JS和CSS

<link href="${ctxPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctxPath}/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="${ctxPath}/static/css/plugins/validate/bootstrapValidator.min.css" rel="stylesheet" />
<link href="${ctxPath}/static/css/login.css" rel="stylesheet">
<script src="${ctxPath}/static/js/jquery.min.js"></script>
<script src="${ctxPath}/static/js/plugins/validate/bootstrapValidator.min.js"></script>

3、Bootstrap：Html添加Form表单

<form id="loginForm" class="m-t" role="form" action="${ctxPath}/login" method="post">
<div class="form-group">
    <div class="input-group" style="text-align: left">
        <span class="input-group-addon">
   <span class="glyphicon glyphicon-user"></span>
        </span>
        <input type="text" name="username" class="form-control" placeholder="用户名" required="">
    </div>
</div>
<div class="form-group">
    <div class="input-group" style="text-align: left">
        <span class="input-group-addon">
    <span class="glyphicon glyphicon-eye-open"></span>
        </span>
        <input type="password" name="password" class="form-control" placeholder="密码" required="">
    </div>
</div>

<button type="submit" name="submit" class="btn btn-primary block full-width m-b">登 录</button>
</p>
</form>

在HTML尾部引用当前登录界面的login.js

<script src="${ctxPath}/static/modular/login/login.js"></script>

4、Bootstrap：添加login.js中bootstrapValidator 自定义验证

$(function () {
    $('#loginForm').bootstrapValidator({
        message: 'This value is not valid',
        //提供输入验证图标提示
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: '用户名验证失败',
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    },
                     stringLength: {
                         min: 6,
                         max: 30,
                         message: '用户名长度必须在4到12之间'
                     },
                     threshold :  4 , //设置4字符以上开始请求服务器
                     //有待验证，备注以备下次使用。
                     //bootstrap的remote验证器需要的返回结果一定是json格式的数据 :
                     //{"valid":false} //表示不合法，验证不通过
                     //{"valid":true} //表示合法，验证通过
                     remote: {//发起Ajax请求。
                         url: 'user/name',//验证地址
                          data:{userName:$('input[name="userName"]').val() }
                         message: '用户已存在',//提示消息
                         delay :  2000,//设置2秒发起名字验证
                         type: 'POST' //请求方式
                     }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    },
                    stringLength: {
                        min: 6,
                        max: 18,
                        message: '密码长度必须在6到12位之间'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_]+$/,
                        message: '密码只能包含大写、小写、数字和下划线'
                    }
                }
            }
        }
    })
    .on('success.form.bv', function(e) {//点击提交之后
	     e.preventDefault();
	     var $form = $(e.target);
	     var bv = $form.data('bootstrapValidator');
	
	     // Use Ajax to submit form data 提交至form标签中的action，result自定义
	     $.post($form.attr('action'), $form.serialize(), function(result) {
	     	 //恢复submit按钮disable状态。
	         $('#loginForm').bootstrapValidator('disableSubmitButtons', false);
	         //do something...
	     });
    });
});

5、Bootstrap：From表单验证效果

注意：有些错误无法自定义居左居右还是居中。
通过浏览器调试工具，如图所示

然后在login.css重写Class=“help-block” 的样式，你可以自定义居中居左还是居右。注意css引用顺序，重载login.css应放在最后引用。

.help-block
{
    text-align: left;
}