这是之前做的项目，要是总结恐怕就没有机会了，现在时间赶所以抓紧时间写一个吧，主要给自己看
大米互助三个form窗体，一个用来收集个人基本信息，一个用来填写公司信息(点击添加按钮弹出窗体，添加信息）一个用来上传图片（fastDFS）；先分解地来说：
提示信息的显示
目前服务器坏了，从网上找了个截图，类似这样的效果，利用自定义属性data-options，输入框给出提示、如果格式不对 ，js提示invalidMessage的内容
<a style="margin-left:20px;">
<label style="font-size:14;">身份证号:</label>
<input id="phone_dlg" class="easyui-textbox" name='gid_number'
value="<s:property value="model.gid_number"/>"
data-options="prompt:'选填,或者前4位********后四位',
validType:['number','length[4,11]','specialCharacter'],invalidMessage:'数字就行，最后四位或者全体11位成员'"
style="width:250px;height:32px; ">
</a><script type="text/javascript">
$.extend($.fn.textbox.defaults.rules, {
number : {
validator : function(value, param) {
return /^[0-9]*$/.test(value);
},
message : "请输入数字"
},
chinese : {
validator : function(value, param) {
var reg = /^[\u4e00-\u9fa5]+$/i;
return reg.test(value);
},
message : "请输入中文"
},
checkLength: {
validator: function(value, param){
return param[0] >= get_length(value);
},
message: '请输入最大{0}位字符'
},
specialCharacter: {
validator: function(value, param){
var reg = new RegExp("[`~!#$^&*()=|{}':;'\\[\\]<>~！#￥……&*（）——|{}【】‘；：”“'、？]");
return !reg.test(value);
},
message: '不允许输入特殊字符'
}
})
</script>form表单submit
的时候有一些问题，记得开始怎么也提交不上，后来周坤大神热心帮忙：
document.fmCompany.action = "${pageContext.request.contextPath}/addCompany_saveCompanyInfo.action";
document.fmCompany.submit();需要有name属性，这个和js还有JQuey的区别有关系;具体是什么记不清了，没有及时总结的坏处……
http://www.cnblogs.com/hanqishihu/p/5601328.html http://www.jb51.net/article/39494.htm
也可以（配合下面的表单刷新的障眼法）：
<form name="flowCardForm" action="${pageContext.request.contextPath}/addCompany_saveCompanyInfo.action">
<input type="hidden" name="command" value="${query }">//隐藏属性<input name="btnQuery" type="submit" class="button1" id="btnQuery" value="查询">form表单提交会刷新
同一个界面的其他都是都会丢失，多次解决无效我使用了模型驱动来回显与绑定数据（不是很好），后来找到了一个博客（）利用iframe：
<iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe><form name="fmGraduator" id="fmGraduator" method="post"
class="embed-responsive-item" target="nm_iframe"
enctype="multipart/form-data">图片用到是fastDFS：
<td align="center" bgColor="#f5fafe" class="ta_01"><textarea
id="editor_id" name="gradutorPictureName"
style="width:100%;height:300px;">
</textarea>
</td><script type="text/javascript">
$(function(){
KindEditor.ready(function(K) {
var editor1 = K.create('#editor_id', {
//自定义工具栏
items:[
'multiimage'
],
uploadJson : 'adds_imgUpload.action', //图片上传Action
allowImageRemote : false //取消网络图片上传
});
});
})
</script>获取：var pictureInfo=$("#editor_id").val();
拼接：
action 中 jsp中数据一些问题，所以需要截取拼接一下：
public String savePictureInfo() throws Exception {
String [] pictureNameStrings=gradutorPictureName.split("<");
List<Picture> picturesForSaveList =new ArrayList<Picture>();
for (int i = 1; i < pictureNameStrings.length; i++) {
String pNameString="<";
pNameString+=pictureNameStrings[i];
String namesString=pNameString;
//从session中获取个人的id
Map gradutorMap=ActionContext.getContext().getSession();
String graduotrString =(String)gradutorMap.get("GradutorId");
if(graduotrString==null || graduotrString==""){
picturesForSave.setGid("无");
}else {
picturesForSave.setGid(graduotrString);
}
//从session中获取毕业生姓名
String gNameString =(String)gradutorMap.get("gradutorName");
if(gNameString ==null || gNameString == ""){
picturesForSave.setpName("无");
}else {
picturesForSave.setpName(namesString);
}
picturesForSave.setDelete_tap(0);
picturesForSave.setSave_time(dateString);
picturesForSave.setUpdate_time(dateString);
//图片标识 为gid+毕业生姓名
String tagString=graduotrString+gNameString;
picturesForSave.setPtag(tagString);
picturesForSaveList.add(picturesForSave);
}
//保持到数据库
this.addService.addPictureList(picturesForSaveList);
return "saveSuccess";
}
下面主体代码是一个个人基本信息的panel（内涵form表单）汉字部分是给出的提示，输入时消失
<div class="panel panel-htop"
style="display: block; width: 94%;margin-left:45px;">
<div class="panel-header" style="width: 94%;">
<div class="panel-title"></div>
</div>
<div id="p" class="easyui-panel panel-body"
style="padding: 10px; width: 95%; height: 350px;">
<%--action="${ pageContext.request.contextPath }/adds_saveGradutorInfo.action"--%>
<form name="fmGraduator" id="fmGraduator" method="post"
class="embed-responsive-item" target="nm_iframe"
enctype="multipart/form-data">
<div style="margin-bottom:20px;margin-top:20px;">
<label style="font-size:15;margin-right:14px;">毕业生的姓名:</label> <input
class="easyui-textbox" id="username_dlg" required="true"
name='gname' value="<s:property value="model.gname"/>"
data-options="prompt:'同名：如王丹、请对应填写大小王丹',
validType:['specialCharacter'],invalidMessage:'中文名就好，请不要输入特殊字符'"
style="width:18%;height:32px;"> <label
style="font-size:15;margin-left:44px;">学员所在期数:</label> <input
class="easyui-textbox" id="ggrade" required="true" name='ggrade'
value="<s:property value="model.ggrade"/>"
data-options="prompt:'只写数字就好，如：12期的小伙伴写 12',
validType:['number','specialCharacter'],invalidMessage:'只输入数字就好，如：12期输入 12,配合即默契'"
style="width:20%;height:32px; ">
</div>
<div style="margin-bottom:20px;">
<label style="font-size:14;margin-right:20px;">学员常用电话:</label> <input
class="easyui-textbox" id="phone_dlg" name='gphone'
required="true" value="<s:property value="model.gphone"/>"
data-options="prompt:'常用电话就行',
validType:['number','specialCharacter','length[11,11]'],invalidMessage:'11位的电话就行'"
style="height:32px; width:200px;"> <label
style="font-size:14;margin-left:44px;">学员常用邮箱:</label> <input
class="easyui-textbox" name='gemail' id='gemail'
value="<s:property value="model.gemail"/>" required="true"
data-options="prompt:'常联系……',validType:['specialCharacter','email']"
style="width:200px;height:32px; ">
<a style="margin-left:20px;">
<label style="font-size:14;">身份证号:</label> <input
id="phone_dlg" class="easyui-textbox" name='gid_number'
value="<s:property value="model.gid_number"/>"
data-options="prompt:'选填,或者前4位********后四位',
validType:['number','length[4,11]','specialCharacter'],invalidMessage:'数字就行，最后四位或者全体11位成员'"
style="width:250px;height:32px; ">
</a>
</div>
<div style="margin-top:20px;">
<label style="font-size:14;margin-right:20px;">个人简介或寄语:</label> <input
class="easyui-textbox" name='gintroduce'
value="<s:property value="model.gintroduce"/>"
data-options="prompt:'选填，自我介绍、自己的成长历程，对师弟师妹的建议、对大米时代 米老师想说的话',validType:['specialCharacter','textbox']"
style="width:100%;height:130px;">
</div>
<div>
<a class="easyui-linkbutton c6 l-btn l-btn-small"
id="companyAddBtn" name="companyAddBtn"
style="float:right;margin-right:20px;margin-bottom:10px;
margin-top:15px;width:160px;height:40px;display:none;"
iconcls="icon-ok" onclick="showCompany()">2.点击添加公司信息<br />可复用</a>
<a class="easyui-linkbutton c6 l-btn l-btn-small" id="personAddBtn"
type="submit"
style="float:right; margin-right:10px;margin-bottom:10px;margin-top:15px;width:150px;height:40px;"
iconcls="icon-ok" onclick="savegradutor()">1.先保存信息</a>
</div>
</form>
</div>
</div>最后写一个显示隐藏的
隐藏：style="display: block;" style="display:none;" 显示； $("#companyAddBtn").show();
form显示并设置标头$('#dlg').dialog('open').dialog('center').dialog('setTitle','添加公司信息');
关闭 $('#dlg').dialog('close'); ——js和jQuery并用
总结：
现在看来都是些简单的东西，有一段时间了，现在大概走一遍代码，忘了一些东西，记得解决问题的过程中遇到了一些问题，所以时间花的有点长，静下心/急于求成总是不好
扫一扫
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
