关于bootstrap模态框+bootstrapvalidator验证框架的一些总结

使用bootstrapvalidator框架需要做的事情：

1、引入css与js文件

//css样式
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="css/bootstrapValidator.min.css" type="text/css" rel="stylesheet" />

//js
<script type="text/javascript" src="jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrapValidator.min.js"></script>

 2、为需要验证的form表单初始化validator

$(function(){
    $("#addForm").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: 1,
	                        max: 18,
	                        message: '账号长度必须在1到18位之间'
	                    },
	                    regexp: {//正则表达式
	                        regexp: /^[a-zA-Z0-9_]+$/,
	                        message: '账号只能包含大写、小写、数字和下划线'
	                    },
	                    remote: { //ajax验证账号是否重复，注意，此处返回值的格式是:                
                                  //{"valid":true||false}
	                    	url: 'setting/qx/user/valid.do',
	                        message: '用户名已存在',
	                        delay :  2000,
	                        type: 'POST',
	                        data: {
	                        	username: $("#username").val()
	                        }
	                    }
	                }
	            },
	            password:{
	            	message: '两次密码必须一致',
	            	validators:{
	            		notEmpty:{
	            			message: '确认密码密码不能为空'
	            		},
	            		identical: {
	                        field: 'password2',
	                        message: '两次输入的密码不相符'
	                    }
	            	}
	            },
	            password2:{
	            	message: '两次密码必须一致',
	            	validators:{
	            		notEmpty:{
	            			message: '确认密码密码不能为空'
	            		},
	            		identical: {
	                        field: 'password',
	                        message: '两次输入的密码不相符'
	                    }
	            	}
	            },
	            
	        }
	    });
})

3、提交表单的时候验证

$("#saveBtn").click(function(){
			var bootstrapValidator = $("#addForm").data("bootstrapValidator");
			bootstrapValidator.validate();
			if(bootstrapValidator.isValid()){
				$.ajax({//通过ajax请求来提交表单，可以灵活控制提交后的操作
					url:"setting/qx/user/save.do",
					async:false,
					type:"get",
					data:$("#addForm").serialize(),
					success: function (result) {
	                    if (result=="true") {
	                      $('#Modal').modal('hide');
	                    } else {
	                        $("#returnMessage").hide().html('<label class="label label-danger">修改失败!</label>').show(300);
	                    }
	                }, error: function () {
	                    $("#returnMessage").hide().html('<label class="label label-danger">修改失败!</label>').show(300);
	                }
				})
			}
		})

4、关于模态窗口，有几点注意：

（1）如果不想让模态窗口在点击空白处就消失，以及按Esc键就消失得方法是加上两个属性 

        data-backdrop="static" data-keyboard="false"

          

<div class="modal fade" id="createUserModal" role="dialog" data-backdrop="static" data-keyboard="false">

（2）在点击提交按钮的时候，不要加data-dismiss="modal" 属性，因为这样就直接关闭窗口而看不到验证消息了，可以在ajax请求之后的回调函数里关闭  $('#Modalid').modal('hide');