例如（拿其中一个选项卡举例，具体css不予给出）
<div class="right-content hidden" id="education-info">
<div class="add-education">
<span>新增学历</span>
</div>
<form th:action="@{/staffeducation/addorset}" method="post" id="educationForm" enctype="multipart/form-data">
<div class="">
<!-- 学历 -->
<div class="education-background clearfix">
<span>学历</span>
<input type="hidden" name="staffId" th:value="${staff.staffId}"/>
<input type="hidden" id="educationId" name="educationId" />
<select name="education" id="education">
<option value="初中及以下">初中及以下</option>
<option value="高中">高中</option>
<option value="中技">中技</option>
<option value="中专">中专</option>
<option value="大专">大专</option>
<option value="本科">本科</option>
<option value="硕士">硕士</option>
<option value="MBA">MBA</option>
<option value="博士">博士</option>
</select>
<label><input type="checkbox" value="1" id="educationIsHigh" name="educationIsHigh" /> 最高学历</label>
</div>
<!-- 学历类型 -->
<div class="education-type clearfix">
<span>学历类型</span>
<select name="educationType" id="educationType">
<option value="全日制学历" >全日制学历</option>
<option value="非全日制学历" >非全日制学历</option>
</select>
</div>
<!-- 毕业学校 -->
<div class="graduate-school clearfix">
<span>毕业学校</span>
<input class="form-control" name="educationSchool" id="educationSchool" type="text" maxlength="15" />
</div>
<div class="graduate-school clearfix">
<span>毕业专业</span>
<input class="form-control" name="educationMajor" id="educationMajor" type="text" maxlength="15" />
</div>
<!-- 毕业时间 -->
<div class="graduation-date clearfix">
<span class="date-graduation">毕业时间</span>
<div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="educationTime" data-link-format="yyyy-mm-dd">
<input class="form-control" type="text" value="" readonly="readonly" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="educationTime" name="educationTime" value="" />
</div>
<!-- 附件 -->
<div class="uplaod-accessory clearfix">
<span>附件</span>
<div class="uplaod-btn">
<div class="uplaod-click">点击上传</div>
<input type="file" id="education_picture" name="img" title="点击上传" />
</div>
<div class="uplaod-succeed hidden" title="点击预览">
<span class="file-name" id="education_filename" data-url=""></span>
</div>
</div>
<div class="uplaod-hint">
请上传学历证书的照片，照片大小不超过10M，附件支持格式：'jpg', 'bmp', 'png'
</div>
<div class="submit-btn">
<button class="btn btn-default submit" type="submit">提交</button>
<button class="btn btn-default back" type="button">取消</button>
</div>
</div>
</form>
</div>
juqery.form.js异步提交表单实现方法不唯一，这里我用ajaxForm
$(function()
{
//配置表单异步提交
$('#educationForm').ajaxForm({
beforeSerialize:assembled_education_form,//表单序列化之前处理某些表单控件值，return false 则表单不提交
beforeSubmit : validate_education_form,//表单异步提交之前进行表单值合法性验证，return false 则表单不提交
success : function(data) {
if(data.state == "200")
{
// alertShow("保存成功");
//表单提交成功，异步刷新列表
$.ajax({
url:"/staffeducation/getlist",
type:"get",
data:{staffId:$("#staffId").val()},
success:function(data)
{ //模板引擎返回局部页面
$("#education_table").replaceWith(data);
$("#staffContent").removeClass("hidden");
$("#education-info").addClass("hidden");
}
});
}
else
{
alertShow("保存失败："+ data.msg);
}
status = true;
$("#educationTime").val(""); //隐藏域不清空，需要手动清空表单
},
error:function(data){
status = true;
$("#educationTime").val(""); //隐藏域不清空，需要手动清空表单
},
resetForm : true //清空表单
});
})
function assembled_education_form(form,options)
{
return true;
}
function validate_education_form(formData, jqForm, options)
{ //防止连续点击，表单重复异步提交
if(status)
{
$("#education_picture").poshytip("hide");
$("#educationSchool").poshytip("hide");
$("#educationSchool").poshytip({
content: '学校不能为空！',
showOn: 'none',
alignTo: 'target',
alignX: 'inner-left',
offsetX: 0,
offsetY: 5
});
$("#educationMajor").poshytip("hide");
$("#educationMajor").poshytip({
content: '专业不能为空！',
showOn: 'none',
alignTo: 'target',
alignX: 'inner-left',
offsetX: 0,
offsetY: 5
});
$("#educationTime").prev().find("input").poshytip("hide");
$("#educationTime").prev().find("input").poshytip({
content: '日期不能为空！',
showOn: 'none',
alignTo: 'target',
alignX: 'inner-left',
offsetX: 0,
offsetY: 5
});
status = false;
var flag = true;
for(var i in formData)
{
switch (formData[i].name)
{
case "educationSchool":
{
if($.trim(formData[i].value) == "")
{
flag = false;
$("#educationSchool").poshytip("show");
}
else
{
$("#educationSchool").poshytip("hide");
}
break;
}
case "educationMajor":
{
if($.trim(formData[i].value) == "")
{
flag = false;
$("#educationMajor").poshytip("show");
}
else
{
$("#educationMajor").poshytip("hide");
}
break;
}
case "educationTime":
{
if($.trim(formData[i].value) == "")
{
flag = false;
$("#educationTime").prev().find("input").poshytip("show");
}
else
{
$("#educationTime").prev().find("input").poshytip("hide");
}
break;
}
}
}
if(!flag)
status = true;
return flag;
}
return false;
}
后台springMVC代码
/**
* 添加or修改 add
* author chensg
* 2016.03.15
*/
@RequestMapping(value = "/addorset", method = RequestMethod.POST)
public @ResponseBody RestResult addOrSetStaff(StaffEducation staffEducation,@RequestParam(value = "img" ,required=false) MultipartFile file,HttpServletRequest request, Model model) {
if(null == staffEducation.getEducationIsHigh()) //如果没有勾选最高学历，后台不会接受到参数
staffEducation.setEducationIsHigh(0);
RestResult result = null;
String educationId ;
//没有educationId则是新增
if(null==staffEducation.getEducationId() || "".equals(staffEducation.getEducationId())){
result = client.addStaffEducation(staffEducation);
//获得新增后的唯一uuid
educationId = result.getResults().get("educationId").toString();
}else{
//修改
result = client.setStaffEducation(staffEducation);
educationId = staffEducation.getEducationId();
}
if( null != file)
{
//图片路径用唯一的educationId（uuid）
String path = request.getSession().getServletContext().getRealPath("upload/"+educationId);
String fileName ="educationPicture."+ file.getOriginalFilename().split("\\.")[1];
File targetFile = new File(path, fileName);
if(!targetFile.exists()){
targetFile.mkdirs();
}
//保存图片路径
try {
file.transferTo(targetFile);
staffEducation = new StaffEducation();
staffEducation.setEducationId(educationId);
staffEducation.setEducationUrl(request.getContextPath()+"/upload/"+educationId+"/"+fileName);
return client.setStaffEducation(staffEducation);
} catch (Exception e) {
e.printStackTrace();
}
}
return result;
}