<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
Date date = new Date();
request.setAttribute("date", date);
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script
src="<%=path%>/js/My97DatePicker/WdatePicker.js"
type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
href="<%=path%>/css/validation.css"/>
<link rel="stylesheet" type="text/css"
href="<%=path%>/css/emailAutoComplete.css"/>
<link rel="stylesheet" type="text/css"
href="<%=path%>/css/common.css"/>
<link rel="stylesheet" type="text/css"
href="<%=path%>/css/email/mail.css"/>
<script src="<%=path%>/js/main.js" type="text/javascript"></script>
<script type="text/javascript" src="<%=path%>/js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.validate.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.mailAutoComplete-3.1.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.form.js"></script>
<style type="text/css">
.blank{
border: 1px solid #DB9238;
font-size: 14px;
height: 24px;
margin: 0 5px;
padding: 2px;
width: 196px;
}
</style>
<script type="text/javascript">
$().ready(function() {
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|14[0-9]{1}|18[0-9]{1})+\d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");
jQuery.validator.addMethod("isEmail",function(value,element){
var email = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
return this.optional(element) || (email.test(value));
},"请输入正确的email");
$("#insertContact").validate({
errorPlacement:function(error,element){
error.appendTo(element.parent());
},
errorClass:"haha",
success:function(label){
label.addClass("valid").text(" ");
},
rules:{
contactLoginName:{
required: true,
remote:{
url:"<%=path%>/contact/validateContactUserId.do",
type:"post",
datatype:"json",
data:{
contactLoginName:function(){
return $("#contactLoginName").val();
}
}
}
},
gender:{
required:true
},
contactName:{
required:true,
},
mobilePhone:{
digits:true,
isMobile:true
},
personalEmail:{
isEmail:true,
accept:".com|.com.cn|.cn|.net|.edu"
},
officeEmail:{
isEmail:true,
accept:".com|.com.cn|.cn|.net|.edu"
}
},
messages:{
contactLoginName:{
required:"不能为空",
remote:"没有此用户"
},
gender:{
required:"不能为空"
},
contactName:{
required:"不能为空"
},
mobilePhone:{
digits:"格式不对",
isMobile:"格式不对"
},
personalEmail:{
isEmail:"不合法",
accept:"后缀名错误"
},
officeEmail:{
isEmail:"不合法",
accept:"后缀名错误"
}
}
});
});
$(document).ready(function(){
$("#otherInfo").toggle(function(){
$("#children").show(); //将子节点的div元素显示出来并重新定位到上次操作的元素
},function(){
$("#children").hide(); //将子节点的div元素显示出来并重新定位到上次操作的元素
});
});
</script>
<title>新建联系人</title>
</head>
<body style="padding: 0;margin: 0;">
<div id="userRegForm" style="width: 600px;">
<form action="../contact/insertContact.do" method="post"
name="insertContact"id="insertContact">
<div style=" margin-bottom:30px;">
<div style="float:right;">
<input type="button"class="confirm" value="返回" onclick="window.location.href='<%=request.getContextPath() %>/contact/beforeContactHome.do'"/>
</div>
<h3 style="font-family: Arial,Helvetica,sans-serif;">联系人信息</h3>
<hr>
</div>
<div class="lay">
<div class="c2">姓名:</div>
<div class="c3">
<input type="text"class="blank" id="contactName" name="contactName">*
</div>
</div>
<div class="lay">
<div class="c2">性别:</div>
<div id="" class="c3">
<select name="gender">
<option value="0">男</option>
<option value="1">女</option>
</select>
</div>
</div>
<div class="lay">
<div class="c2">联系人登录名:</div>
<div class="c3">
<input type="text" id="contactLoginName"class="blank" name="contactLoginName">*
<input type="hidden" id = "contactUserId" name="contactUserId" value="${userId}"/>
</div>
</div>
<div class="lay">
<div class="c2">所属组:</div>
<div class="c3">
<select name="groupName">
<option></option>
<c:forEach items="${groupList }" var="group">
<option value="${group.groupId}">${group.groupName}</option>
</c:forEach>
</select>
</div>
</div>
<div id="menu">
<span id="otherInfo" style="font-size:14px;cursor:pointer;font-weight:bold;">其他信息</span>
<hr/>
<div class="children" id="children" style="display: none;">
<div class="lay">
<div class="c2">私人邮箱:</div>
<div class="c3">
<input type="text" id="personalEmail" class="blank"name="personalEmail">
</div>
</div>
<div class="lay">
<div class="c2">单位名称:</div>
<div class="c3">
<input type="text" id="unitName" class="blank"name="unitName">
</div>
</div>
<div class="lay">
<div class="c2">办公邮箱:</div>
<div class="c3">
<input type="text" id="officeEmail" class="blank"name="officeEmail">
</div>
</div>
<div id="c3" class="lay">
<div class="c2">移动电话:</div>
<div class="c3">
<input type="text" id="mobilePhone" class="blank"name="mobilePhone">
</div>
</div>
<div id="c3" class="lay">
<div class="c2">办公电话:</div>
<div class="c3">
<input type="text" id="officePhone" class="blank"name="officePhone">
</div>
</div>
<div class="lay">
<div class="c2">办公传真:</div>
<div class="c3">
<input type="text" id="officeFax" class="blank"name="officeFax">
</div>
</div>
<div class="lay">
<div class="c2">家庭电话:</div>
<div class="c3">
<input type="text" id="familyPhone" class="blank"name="familyPhone">
</div>
</div>
<div class="lay">
<div class="c2">办公地址:</div>
<div class="c3">
<input type="text" id="officeAdress" class="blank"name="officeAdress">
</div>
</div>
<div class="lay">
<div class="c2">办公地址邮编:</div>
<div class="c3">
<input type="text" id="officeZip" class="blank"name="officeZip">
</div>
</div>
<div id="c3" class="lay">
<div class="c2">家庭住址:</div>
<div class="c3">
<input type="text" id="familyAdress" class="blank"name="familyAdress">
</div>
</div>
<div id="c3" class="lay">
<div class="c2">家庭住址邮编:</div>
<div class="c3">
<input type="text" id="familyZip"class="blank" name="familyZip">
</div>
</div>
<div id="c3" class="lay">
<div class="c2">个人网址:</div>
<div class="c3">
<input type="text" id="personalWebsite"class="blank" name="personalWebsite">
</div>
</div>
<input type="hidden" id="inputDate" name="inputDate" value="${date}">
<div class="lay">
<div id="" class="c2">生日:</div>
<div id="" class="c3">
<input id="birthday1" name="birthday1" class="blank"
onFocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})" />
<img src="../My97DatePicker/skin/datePicker.gif" width="16"
height="22">
</div>
</div>
<div class="lay">
<div id="" class="c2">备注:</div>
<div id="" class="c3">
<textarea name="remark" id="remark" rows="5" cols="50"
style="overflow:scroll;border: 1px solid #DB9238;"></textarea>
</div>
</div>
<div class="c4">
<p style="font-color:#d3d3d3;">(最多200个汉字或者200个英文字母)</p>
</div>
</div>
</div>
<div class="lay">
<div id="" class="c2">
<input type="submit"class="confirm" value="确认" />
</div>
</div>
</form>
</div>
</body>
</html>
后台的验证代码：
/**
* 验证所填写的用户名是否存在
* @param request
* @param response
*/
@RequestMapping("validateContactUserId")
public void validateContactUserId(HttpServletRequest request,
HttpServletResponse response){
String contactLoginName = (String) request.getParameter("contactLoginName");
response.setContentType("text/html;charset=utf-8");
try {
PrintWriter out = response.getWriter();
User user = contactService.selectContactByLoginName(contactLoginName);
if (user == null) {
out.print("false");
} else {
HttpSession session = request.getSession();
session.setAttribute("userId", user.getUserId());
out.print("true");
}
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 验证分组名字是否已经存在
*/
@RequestMapping("validateGroupName")
public void validateGroupName(HttpServletRequest request,
HttpServletResponse response){
String groupName = (String) request.getParameter("groupName");
response.setContentType("text/html;charset=utf-8");
try {
PrintWriter out = response.getWriter();
ContactGroup group = contactGroupService.selectGroupByName(groupName);
if (group == null) {
out.print("true");
} else {
out.print("false");
}
} catch (IOException e) {
e.printStackTrace();
}
}
