javascript验证表单格式

最新推荐文章于 2019-01-30 23:17:02 发布

missysm586

最新推荐文章于 2019-01-30 23:17:02 发布

阅读量1.7k

点赞数

分类专栏： DreamWeaver学习文章标签： javascript email xhtml 电话手机 import

本文链接：https://blog.csdn.net/missysm586/article/details/7028473

版权

DreamWeaver学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<%@ 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"  οnblur="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"  οnblur="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"  οnblur="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"  οnblur="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"   οnclick="checktime()" /></div>

</body>
</html>

效果图：

1）验证为空

2）验证格式是否正确

3）正确格式

missysm586

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript验证表单格式

显示图片验证Demo/*验证Email是否为空，和格式是否正确*/function checkEmail(){ var txtEmail=document.getElementById("txtEmail"); var divEmail=document.getElementById("divEmail"); var varMail= /^([a-zA-Z0-9]
复制链接

扫一扫

专栏目录