Bootstrap Validator 表单验证 使用方法

一、引入文件

源码地址：
https://github.com/nghuuphuoc/bootstrapvalidator

项目引入文件：

	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/bootstrapValidator.css" />
    
    <script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
    <script type="text/javascript" src="js/bootstrap/bootstrap.min.js" ></script>
    <script type="text/javascript" src="js/bootstrap/bootstrapValidator.min.js" ></script>

二、代码

$('#Edit-form').bootstrapValidator({
	message: '通用的验证失败消息',
	live: 'enabled',//验证时机：enabled内容变化验证（默认），disabled和submitted是提交再验证
	//excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，如被禁用的或者被隐藏的
	excluded : [':disabled'],					//隐藏select组件可验证 
	feedbackIcons: {							//根据验证结果显示的各种图标
		valid: 'glyphicon glyphicon-ok',
		invalid: 'glyphicon glyphicon-remove',
		validating: 'glyphicon glyphicon-refresh'
	},
	fields: {
		name: {
			trigger: 'change',					//$(input).change(); 文本框change后改变验证
			validators: {
				notEmpty: {						//检测非空,radio也可用
					message: '名称不能为空'
				},
				regexp: {						//正则
					regexp: /^[a-zA-Z0-9_\.]+$/,
					message: '密码只能包含大小写英文字母、数字、下划线'
				},
				digits: {						//数字正整数
			   		message : '只能输入正整数'
				},
				greaterThan: {
    				value : 1,
   					message : '最小输入1'
				},
				lessThan: {
    				value : 100,
    				message : '最大输入100'
				},
				stringLength: {					//长度
					min: 6,
					max: 16,
					message: '密码长度必须在6到16之间'
				},
				identical: {				//比较内容不相同
					field: '文本框name',
					message: '与确认密码输入不一致'
				},
				different: {				//比较内容相同
					field: '文本框name',
					message: '不能与原始旧密码一致'
				},
				threshold: 6,	//有6字符以上才发送ajax请求
				remote: {		//ajax验证返回json数据（返回前台类型:{"valid",true} 表示合法，验证通过。{"valid":false} 表示不合法，验证不通过）
					url: "url",
					message: '原始旧密码错误,请重新输入',
					delay: 1000,	//ajax刷新的时间是1秒一次
					type: 'POST',
					data: function(validator) {
						return {
							Name : $("input[name = oldpassword ]").val(),
							method : "",	//后台判断调用方法关键字。
						};
					}
				},
				emailAddress: {					//邮箱地址格
					message: '邮箱地址格式有误'
				},
				date: {							//日期格式
	                format: 'YYYY-MM-DD',
                    message: '日期格式不正确'
               },
               choice: {						//check控件选择的数量
	               min: 2,
                   max: 4,
                   message: '必须选择2-4个选项'
               },
			},
		},
		select: {
			validators: {
				notEmpty: {
					message: '请选择select'
				}
			}
		}
	}
}).on('success.form.bv',function(){});

//非submit按钮点击后进行验证，如果是submit则无需此句直接验证
$("#Edit-btn").click(function() {
	$('#Edit-form').data('bootstrapValidator').validate();
	if($('#Edit-form').data('bootstrapValidator').isValid()){	//如果验证成功执行
		$.ajax({
			type: 'post',
			url: '',
			data:$('#Edit-form').serialize(),
			success:function (result) {
				ToastrOptions();
				toastr.success('用户组编辑完成！');					//toastr提示
				$("#Edit").modal("hide");							//关闭模态框
				$("#List").bootstrapTable("refresh", {silent: true});//静态刷新table
			}
		})
	}
});

//关闭模态框清空表单
$("#Edit").on('hide.bs.modal',function() {						
	$("#Edit-form").data('bootstrapValidator').resetForm(true);
	$("#Edit-form")[0].reset();
	$(".selectpicker").selectpicker('deselectAll');
//	$("input[name='dataSpaceRole']").prop("checked",false);
});