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方法的参数
//请求成功后要做的事情
}
});
}
}