导入相关的 js，css
<link rel="stylesheet" href="<%=path%>/assets/plugins/bootstrap-3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="<%=path%>/assets/plugins/bootstrapvalidator-0.5.2/css/bootstrapValidator.css" /> <!--bootstrap dialog 用于弹出框--> <link rel="stylesheet" href="<%=path%>/assets/plugins/bootstrap3-dialog/css/bootstrap-dialog.min.css" /> <script src="<%=path%>/assets/js/jquery-1.12.3.min.js"> <script src="<%=path%>/assets/plugins/jquery-bootpag/jquery.bootpag.min.js"></script> <script src="<%=path%>/assets/plugins/bootstrapvalidator-0.5.2/js/bootstrapValidator.min.js"></script> <!--bootstrap dialog 用于弹出框--> <script src="<%=path%>/assets/plugins/bootstrap3-dialog/js/bootstrap-dialog.min.js"></script>
jsp的相关代码
</div> <button type="button" class="btn btn-sm yellow" id="add">添加(S)</button> </div> <!-- 模态框（Modal） --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button> <h4 class="modal-title" id="myModalLabel"> 添加 </h4> </div> <div class="modal-body"> <form action="" method="post" class="form-horizontal" id="defaultForm"> <div class="form-group"> <label class="col-lg-3 control-label">UserId</label> <div class="col-lg-5"> <input type="text" class="form-control" name="userId" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">账号</label> <div class="col-lg-5"> <input type="text" class="form-control" name="username" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">密码</label> <div class="col-lg-5"> <input type="password" class="form-control" name="password" /> </div> </div> <div class="form-group"> <div class="col-lg-9 col-lg-offset-3"> <button type="submit" class="btn btn-primary">Sign up</button> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button> <button type="button" class="btn btn-primary"> 提交保存 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
js代码 放在$(function(){}) 里面
//弹出定义的 模态框（Modal） $("#add").bind("click", function(Event) { $('#myModal').modal({ keyboard: true }); }); //表单验证bootstrap validation form-group的div是必须的 $('#defaultForm') .bootstrapValidator({ message: '值不能为空', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { userId: { message: 'The username is not valid', validators: { notEmpty: {//非空验证 message: 'id必填且不能为空' }, stringLength: {//长度验证 min: 3, max: 30, message: '长度必须在3-30之间' }, remote: {//与后台校验验证 bootstrap的remote验证器需要的返回结果一定是json格式的数据 :{"valid":false} //表示不合法，验证不通过 {"valid":true} //表示合法，验证通过 url: '<%=path%>/validatorController/validator', message: '用户id已存在', delay : 500,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置0.5秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大） type: 'POST'//请求方式 /**自定义提交数据，默认值提交当前input value * data: function(validator) { return { password: $('[name="passwordNameAttributeInYourForm"]').val(), whatever: $('[name="whateverNameAttributeInYourForm"]').val() }; } */ }, regexp: {//自定义规则 regexp: /^[a-zA-Z0-9_\.]+$/, message: '用户名只能由字母、数字、点和下划线组成 ' } } }, username: { validators: { notEmpty: {//非空验证：提示消息 message: '名称必填且不能为空' }, identical: {//相同 field: 'userId', //需要进行比较的input name值 message: 'id与用户名应该保持一致' } } }, password: { validators: { notEmpty: { message: '密码不能为空' }, stringLength: { min: 5, max: 20, message: '长度必须在6-20之间' }, } } } }) .on('success.form.bv', function(e) { // Prevent form submission e.preventDefault(); // Get the form instance var $form = $(e.target); // Get the BootstrapValidator instance var bv = $form.data('bootstrapValidator'); // Use Ajax to submit form data $.post($form.attr('action'), $form.serialize(), function(result) { console.log(result); }, 'json'); });
注意 input 必须要使用 form-group的div是必须的 即 <div class="form-group"></div> 是必要的，不然没效果 <div class="form-group"> <label class="col-lg-3 control-label">密码</label> <div class="col-lg-5"> <input type="password" class="form-control" name="password" /> </div> </div> http://www.cnblogs.com/franson-2016/p/5613696.html http://www.cnblogs.com/xiaoruilin/p/5807922.html
