javascript验证表单格式
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!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>显示图片验证Demo</title>
<script type="text/javascript">
/*验证Email是否为空，和格式是否正确*/
function checkEmail()
{
var txtEmail=document.getElementById("txtEmail");
var divEmail=document.getElementById("divEmail");
var varMail= /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if(txtEmail.value!="")
{
if (!varMail.test(txtEmail.value))
{
divEmail.style.display="block";
}
else
{
divEmail.style.display="none";
}
}
else
{
txtEmail.value ="Email不能为空";
}
}
/*验证电话号码格式xxxx-xxxxxxx*/
function checkPhone()
{
var txtPhone=document.getElementById("txtPhone");
var divPhone=document.getElementById("divPhone");
var varphone1=/(\d{3}-)(\d{8})$|(\d{4}-)(\d{7})$/;
var varphone=/^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/;
if(txtPhone.value!="")
{
if(!varphone.test(txtPhone.value))
{
divPhone.style.display="block";
}
else
{
divPhone.style.display="none";
}
}
else
{
txtPhone.value="电话不能为空";
}
}
/*验证11位（从13到19段）手机号码格式是否正确*/
function checkCell()
{
var txtCell=document.getElementById("txtCell");
var divCell=document.getElementById("divCell");
var varcell=/^1[3-9]\d{9}$/;
if(txtCell.value!="")
{
if(!varcell.test(txtCell.value))
{
divCell.style.display="block";
}
else
{
divCell.style.display="none";
}
}
else
{
txtCell.value="手机号码不能为空";
}
}
/*最大字符设置*/
function checknumofwords()
{
var txtNumofwords=document.getElementById("txtNumofwords");
var divNumofwords=document.getElementById("divNumofwords");
if(txtNumofwords.value.length>5)
{
divNumofwords.style.display="block";
}
else
{
divNumofwords.style.display="none";
}
}
/*时间格式*/
function checktime()
{
var txttime=document.getElementById("txttime");
var myDate=new Date();
var mytime=myDate.toLocaleString();
txttime.value=mytime;
}
</script>
</head>
<body>
<div>验证Email格式：</div>
<div><input name="txtEmail" type="text" onblur="checkEmail()" /></div>
<div id="divEmail" style="display:none" ><img src="image/wrong.png" width="15" height="15" /> </div>
<div>验证电话号码格式：</div>
<div><input name="txtPhone" type="text" onblur="checkPhone()" /></div>
<div id="divPhone" style="display:none" ><img src="image/wrong.png" width="15" height="15" /> </div>
<div>验证手机号码格式：</div>
<div><input name="txtCell" type="text" onblur="checkCell()" /></div>
<div id="divCell" style="display:none" ><img src="image/wrong.png" width="15" height="15" /> </div>
<div>验证输入最大字符：</div>
<div><input name="txtNumofwords" type="text" onblur="checknumofwords()" /></div>
<div id="divNumofwords" style="display:none" ><img src="image/wrong.png" width="15" height="15" /> </div>
<div>按照一定的日期格式获得日期和时间：</div>
<div><input name="txttime" type="text" onclick="checktime()" /></div>
</body>
</html>
效果图：
1）验证为空
2）验证格式是否正确
3）正确格式
