<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表單驗證</title>
</head>
<body>
<style type="text/css">
.forwardWrap {width:640px;margin:auto;}
.forwardHead {border-bottom:2px solid #e05d25;padding:5px 0;}
.forwardHead ul {overflow:hidden;}
.forwardHead li {float:left;padding:0 10px 0 0;}
.forwardHead a {font-size:15px;color:#000;line-height:28px;}
.forwardMain {padding:10px 10px 50px;background:#f5f5f5;text-shaow:0px 0px 2px #fff;}
.forwardMain li {overflow:hidden;padding:5px 0;font-size:15px;}
.forwardMain h1 {color:#B74D3F;font-size:18px;font-weight:700;margin:0;}
.forwardMain .tit {float:left;width:150px;text-align:right;}
.forwardMain .con {float:left;}
.forwardMain .txt {padding:3px;border:1px solid #666;box-shadow:2px 2px 2px #ccc;border-radius:3px;}
.forwardMain_btn {cursor:pointer;height:25px;width:60px;border:1px solid #666;}
.forwardTop {font-size:18px;font-weight:700;padding:10px 0 30px;}
.forwardMsg {display:block;padding-top:5px;color:#666;}
.forwardReq {color:#bd1000;}
.forwardError {color:#ff0000;padding:0 0 0 5px;}
.forwardMain .con .forwardReset {background:#eee;border-color:#ccc}
.forwardFoot {text-align:center;border-top:1px solid #ccc;padding:5px 0;}
.forwardFoot ul {padding:5px 0;}
.forwardFoot li {display:inline;margin:0 5px;}</style>
<script src="http://www.chenfahui.cn/ziliao/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
function countChar(textareaName,spanName){
document.getElementById(spanName).innerHTML = 200 - document.getElementById(textareaName).value.length;
if(document.getElementById(textareaName).value.length > 200 ){
$("#mesCounter").css("color","#bd1000");
}
else{
$("#mesCounter").css("color","#000000");
}
};
function isnull(str){
if($.trim(str)=='')
return false;
else
return true;
};
function submitForward(){
var friEmail=document.getElementById("friEmail").value;
var myName=document.getElementById("myName").value;
var myEmail=document.getElementById("myEmail").value;
var mesWords=document.getElementById("mesWords").value;
var verCode=document.getElementById("verCode").value;
if(friEmail.length == 0 || isnull(friEmail) == false){
$("#friEmail_msg").show();
return false;
}
else if(friEmail.length > 200){
$("#friEmail_err").show();
return false;
}
else if(myName.length == 0 || isnull(myName) == false){
$("#myName_msg").show();
return false;
}
else if(myEmail.length == 0 || isnull(myEmail) == false){
$("#myEmail_msg").show();
return false;
}
else if (!myEmail.match(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)){
$("#myEmail_err").show();
return false;
}
else if(mesWords.length > 200){
$("#mesWords_msg").show();
return false;
}
else if(verCode.length == 0 || isnull(verCode) == false){
$("#verCode_msg").show();
return false;
}
else if(verCode != 2){
$("#verCode_Err").show();
return false;
}
else {
if($("#sendCopy").attr("checked")==true){
alert("轉寄成功！\n\n新聞已發送至Email:"+friEmail+","+myEmail+"\n\n如未收到郵件，請到郵箱的「垃圾桶」找找。");
}
else{
alert("轉寄成功！\n\n新聞已發送至Email:"+friEmail+"\n\n如未收到郵件，請到郵箱的「垃圾桶」找找。");
}
location.assign(location);
}
};
$(document).ready(function(){
$(".txt",$(".con")).click(function(){
$(".txt").nextAll(".forwardError").hide();
});
});
</script>
<div class="forwardMain">
<div class="forwardTop">將以下這則新聞轉寄給好友</div>
<form name="">
<ul>
<li>
<div class="tit">新聞：</div>
<div class="con"><h1><a href="javascript:void(0)">與藝術對話 張裕能打造私人美術館ART BOX </a></h1></div>
</li>
<li>
<div class="tit"><span class="forwardReq">*</span>好友Email：</div>
<div class="con">
<input type="text" style="width:200px;" class="txt" id="friEmail" />
<span class="forwardError" id="friEmail_msg" style="display:none">請填寫好友Email</span>
<span class="forwardError" id="friEmail_err" style="display:none">不得超過200個字元！</span>
<span class="forwardMsg">不同Email請以逗點隔開，最多200個字元。</span>
</div>
</li>
<li>
<div class="tit"><span class="forwardReq">*</span>您的姓名：</div>
<div class="con">
<input type="text" style="width:150px;" class="txt" id="myName" />
<span class="forwardError" id="myName_msg" style="display:none">請填寫您的姓名</span>
</div>
</li>
<li>
<div class="tit"><span class="forwardReq">*</span>您的Email：</div>
<div class="con">
<input type="text" style="width:150px;" class="txt" id="myEmail" />
<input type="checkbox" id="sendCopy" />
<label for="sendCopy">寄副本給自己</label>
<span class="forwardError" id="myEmail_msg" style="display:none">請填寫您的Email</span>
<span class="forwardError" id="myEmail_err" style="display:none">Email格式錯誤！</span>
</div>
</li>
<li>
<div class="tit">給好友的留言：</div>
<div class="con">
<textarea id="mesWords" name="mesWords" rows="5" cols="" class="txt" style="width:200px;" onkeydown='countChar("mesWords","mesCounter");' onkeyup='countChar("mesWords","mesCounter");'>這則新聞不錯，值得一讀！</textarea>
<span class="forwardError" id="mesWords_msg" style="display:none">字數不得超過200個字</span>
<span class="forwardMsg" id="">還可以輸入<span id="mesCounter">200</span>字</span>
</div>
</li>
<li>
<div class="tit"><span class="forwardReq">*</span>驗證問題：</div>
<div class="con">
1+1=
<input type="text" style="width:52px;" maxlength="4" class="txt" id="verCode" />
<span class="forwardError" id="verCode_msg" style="display:none">請填寫答案</span>
<span class="forwardError" id="verCode_Err" style="display:none">答案錯誤！</span>
<span class="forwardMsg">不知道？<a href="javascript:void(0)">換一道問題</a></span>
</div>
</li>
<li style="padding:30px 0 0;">
<div class="tit"> </div>
<div class="con">
<input type="button" class="forwardMain_btn" value="轉寄" onclick="submitForward()" />
<input type="reset" class="forwardMain_btn forwardReset" value="清空" />
</div>
</li>
</ul>
</form>
</div>
</body>
</html>
demo: