<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP '3.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jquery-1.4.2.js" ></script>
<script>
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '80px';
imgObjPreview.style.height = '80px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
$(function(){
var flag=false;
$("#name").blur(function(){
$("#vname").empty();
var name=$("#name").val();
if(name==null || name==""){
$("#name").after("<span style='color: red;' id='vname'>姓名不能为空</span>");
return flag;
}else{
$.post("person/selectbyname",{"name":name},function(dd){
if(dd=="ok"){
$("#name").after("<span style='color: red;' id='vname'>用户名已存在</span>");
return flag;
}else{
$("#name").after("<span style='color: red;' id='vname'>√</span>");
flag=true;
return flag;
}
},"text");
}
});
var flag4=false;
$("#phoneNumber").blur(function(){
$("#vphoneNumber").empty();
var str=/^0?1[3|4|5|8][0-9]\d{8}$/;
var phoneNumber=$("#phoneNumber").val();
if(phoneNumber==null || phoneNumber==""){
$("#phoneNumber").after("<span style='color: red;' id='vphoneNumber'>电话不能为空</span>");
return flag4;
}else{
if(str.test(phoneNumber)){
$("#phoneNumber").after("<span style='color: red;' id='vphoneNumber'>√</span>");
flag4=true;
return flag4;
}else{
$("#phoneNumber").after("<span style='color: red;' id='vphoneNumber'>格式不正确</span>");
return flag4;
}
}
});
var flag2=false;
$("#birthday").blur(function(){
$("#vbirthday").empty();
var str=/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/;
var birthday=$("#birthday").val();
if(birthday==null || birthday==""){
$("#birthday").after("<span style='color: red;' id='vbirthday'>日期不能为空</span>");
return flag2;
}else{
if(str.test(birthday)){
$("#birthday").after("<span style='color: red;' id='vbirthday'>√</span>");
flag2=true;
return flag2;
}else{
$("#birthday").after("<span style='color: red;' id='vbirthday'>格式不正确</span>");
return flag2;
}
}
});
var flag3=false;
$("#address").blur(function(){
$("#vaddress").empty();
var address=$("#address").val();
if(address==null || address==""){
$("#address").after("<span style='color: red;' id='vaddress'>地址不能为空</span>");
return flag3;
}else{
$("#address").after("<span style='color: red;' id='vaddress'>√</span>");
flag3=true;
return flag3;
}
});
$("#tj").click(function(){
return flag && flag2 && flag3 & flag4;
});
})
</script>
</head>
<body>
添加新的联系人
<form action="person/insert" method="post" enctype="multipart/form-data">
姓名:<input type="text" name="name" id="name"/><br/>
电话:<input type="text" name="phoneNumber" id="phoneNumber"/><br/>
生日:<input type="text" name="birthday" id="birthday"/><br/>
地址:<input type="text" name="address" id="address"/><br/>
<input type="hidden" name="uid" value="${uid }"/>
头像: <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img id="preview" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="souser" id="doc" style="width:150px;" οnchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
<input type="submit" value="提交" id="tj"/>
</form>
</body>
</html>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP '3.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jquery-1.4.2.js" ></script>
<script>
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '80px';
imgObjPreview.style.height = '80px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
$(function(){
var flag=false;
$("#name").blur(function(){
$("#vname").empty();
var name=$("#name").val();
if(name==null || name==""){
$("#name").after("<span style='color: red;' id='vname'>姓名不能为空</span>");
return flag;
}else{
$.post("person/selectbyname",{"name":name},function(dd){
if(dd=="ok"){
$("#name").after("<span style='color: red;' id='vname'>用户名已存在</span>");
return flag;
}else{
$("#name").after("<span style='color: red;' id='vname'>√</span>");
flag=true;
return flag;
}
},"text");
}
});
var flag4=false;
$("#phoneNumber").blur(function(){
$("#vphoneNumber").empty();
var str=/^0?1[3|4|5|8][0-9]\d{8}$/;
var phoneNumber=$("#phoneNumber").val();
if(phoneNumber==null || phoneNumber==""){
$("#phoneNumber").after("<span style='color: red;' id='vphoneNumber'>电话不能为空</span>");
return flag4;
}else{
if(str.test(phoneNumber)){
$("#phoneNumber").after("<span style='color: red;' id='vphoneNumber'>√</span>");
flag4=true;
return flag4;
}else{
$("#phoneNumber").after("<span style='color: red;' id='vphoneNumber'>格式不正确</span>");
return flag4;
}
}
});
var flag2=false;
$("#birthday").blur(function(){
$("#vbirthday").empty();
var str=/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/;
var birthday=$("#birthday").val();
if(birthday==null || birthday==""){
$("#birthday").after("<span style='color: red;' id='vbirthday'>日期不能为空</span>");
return flag2;
}else{
if(str.test(birthday)){
$("#birthday").after("<span style='color: red;' id='vbirthday'>√</span>");
flag2=true;
return flag2;
}else{
$("#birthday").after("<span style='color: red;' id='vbirthday'>格式不正确</span>");
return flag2;
}
}
});
var flag3=false;
$("#address").blur(function(){
$("#vaddress").empty();
var address=$("#address").val();
if(address==null || address==""){
$("#address").after("<span style='color: red;' id='vaddress'>地址不能为空</span>");
return flag3;
}else{
$("#address").after("<span style='color: red;' id='vaddress'>√</span>");
flag3=true;
return flag3;
}
});
$("#tj").click(function(){
return flag && flag2 && flag3 & flag4;
});
})
</script>
</head>
<body>
添加新的联系人
<form action="person/insert" method="post" enctype="multipart/form-data">
姓名:<input type="text" name="name" id="name"/><br/>
电话:<input type="text" name="phoneNumber" id="phoneNumber"/><br/>
生日:<input type="text" name="birthday" id="birthday"/><br/>
地址:<input type="text" name="address" id="address"/><br/>
<input type="hidden" name="uid" value="${uid }"/>
头像: <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img id="preview" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="souser" id="doc" style="width:150px;" οnchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
<input type="submit" value="提交" id="tj"/>
</form>
</body>
</html>