bootstrapValidator表单基本使用(学习篇)

1、首先引入相关css、js文件

<link rel="stylesheet" type="text/css" href="../css/bootstrapValidator.min.css" />
<script src="../js/bootstrapValidator.min.js" type="text/javascript" charset="utf-8"></script>

2、html部分

<form class="form-horizontal" role="form" id="form-registered">
	//文件上传
	<div class="form-group" style="display: none;" id="operator01">
		<label for="managerPath" class="col-sm-5 control-label">帅哥照片</label>
		<div class="col-sm-7" style="padding-left: 7px;">
			<input type="file" class="form-control" id="managerPath" name="managerPath">
		</div>
	</div>
	//输入框
	<div class="form-group" style="display: none;" id="operator03">
		<label for="managerName" class="col-sm-5 control-label">帅哥姓名</label>
		<div class="col-sm-7" style="padding-left: 7px;">
			<input type="text" class="form-control" name="managerName" id="managerName" placeholder="经办人姓名">
		</div>
	</div>
	//下拉选择器
	<div class="form-group">
		<label for="industryType" class="col-sm-5 control-label">帅哥类别</label>
		<div class="col-sm-7" style="padding-left: 7px;">
			<select class="form-control" name="industryType" id="industryType">
				<option>选择行业类别</option>
				<option value="0">IT</option>
				<option value="1">金融</option>
				<option value="2">空乘</option>
			</select>
		</div>
	</div>
	//日期时间
	<div class="form-group">
		<label class="col-sm-5 control-label" for="establishDate">帅哥日期：</label>
		<div class='col-sm-7' id='datetimepicker1' style="padding-left: 7px;">
			<input type='date' name="establishDate" id="establishDate" class="form-control" />
		</div>
	</div>
	//文本域
	<div class="form-group">
		<label for="desc" class="col-sm-5 control-label">机构简介</label>
			<div class="col-sm-7" style="padding-left: 7px;">
				<textarea class="form-control" name="desc" id="desc" rows="3"></textarea>
			</div>
	</div>
	单选按钮
	<div class="form-group">
		<label for="bankCardType" class="col-sm-5 control-label">银行卡类型</label>
		<div class="col-sm-7" style="padding-left: 7px;">
			<input type="radio" style="margin-left: 5px;" name="radio1" value="借记卡" /> 借记卡
			<input type="radio" style="margin-left: 45px;" name="radio1" value="单位结算卡" /> 单位结算卡
		</div>
	</div>
	<div class="form-group">
		<label for="name" class="col-sm-5 control-label"></label>
		<div class="col-sm-7" style="padding-left: 7px;">
			<button onclick="handelSubmit()" type="submit" name="submit" class="btn btn-default">提交认证</button>
		</div>
	</div>
</form>

3、 js部分

window.onload = function(){
	$('#form-registered').bootstrapValidator({
		message: 'This value is not valid',
		excluded: [':disabled'],
		feedbackIcons: {
			valid: 'glyphicon glyphicon-ok',
			invalid: 'glyphicon glyphicon-remove',
			validating: 'glyphicon glyphicon-refresh'
		},
		fields: {
			managerPath: {
				validators: {
					notEmpty: {
						message: '帅哥照片不能为空'
					},
				},
			},
			managerName: {
				validators: {
					notEmpty: {
						message: '帅哥名称不能为空'
					},
				},
			},
			industryType: {
				validators: {
					notEmpty: {
						message: '帅哥类别不能为空'
					},
					callback: {
						message: '选择行业类别不能为空',
						callback: function(value, validator) {
							if (value == "选择行业类别") {
								return false;
							} else {
								return true;
							}
						}
					}
				},
			},
			establishDate: {
				validators: {
					notEmpty: {
						message: '帅哥日期不能为空'
					},
				},
			},
			desc: {
				validators: {
					notEmpty: {
						message: '机构简介不能为空'
					},
				},
			},
			desc: {
				validators: {
					notEmpty: {
						message: '机构简介不能为空'
					},
				},
			},
			radio1: {
				validators: {
					notEmpty: {
						message: '银行卡类型不能为空'
					},
				},
			},
	})
}
//表单提交
function handelSubmit() {
	//先校验，在调是否通过校验的方法
 	$("#form-registered").data('bootstrapValidator').validate();
	//校验表单是否通过
	var flag = $("#form-registered").data('bootstrapValidator').isValid();
	if (flag) {
		//获取要提交的值
		let managerName = $('#managerName').val();
		//发送请求
		$.ajax({
			type: "PUT", //请求方式
			url: register + "v1/enterprise-user", //地址，就是json文件的请求路径
			dataType: "json", //数据类型可以为 text xml json  script  jsonp
			contentType: "application/json",
			data: managerName,
			success: function(res) { //返回的参数就是 action里面所有的有get和set方法的参数
				//请求成功后要做的事情
			}
		});
	}
}