JS 表单验证特效

最新推荐文章于 2024-02-11 22:06:24 发布

原创最新推荐文章于 2024-02-11 22:06:24 发布 · 579 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#JS 表单验证

第八章表单验证高级特效

第一节表单提示特效

获得焦点和失去焦点样式

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
  /*失去焦点时的样式*/
  .blur
  {
	border:1px solid black;
	background-color:white;
  }
  /*获得焦点时的样式*/
  .focus
  {
	border:1px solid red;
	background-color:yellow;
  }
  </style>

  <script type="text/javascript">
   //失去焦点
   /*
   function sqjd()
   {
	var phone = document.getElementById("phone");
	phone.className="blur";
   }

   function hdjd()
   {
	var phone = document.getElementById("phone");
	phone.className="focus";
   }*/
	
	//加载事件时，绑定元素的事件
	/*window.onload=function(){
		var phone = document.getElementById("phone");
		phone.onblur=sqjd;
		phone.onfocus=hdjd;
	}*/
  </script>
 </head>

 <body>
  手机:
  <input type="text" 
         name="phone" 
		 id="phone"
		 class="blur"
		 onblur="this.className='blur'"
		 onfocus="this.className='focus'"
		 />
 </body>
</html>

表单及时提示特效

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
<style type="text/css">
#d1
{
	width:600px;
	margin:0px auto;
	padding-left:20px;
}
#d1 span
{
	display:inline-block;
	background:lightblue;
	height:20px;
	line-height:20px;
	width:200px;
	font-size:12px;
	padding-left:10px;
}
#d1 span.error
{
	background:#ff99cc;
}
#d1 span.right
{
	background:#00ff66;
}
#d1 span.info
{
	background:lightblue;
}
</style>
<script>
function $(id)
{
	return document.getElementById(id);
}
function ckAcc(s)
{
	if (s=='blur')
	{
		var reg=/^\w{2,11}$/;
		if (reg.test($("acc").value))
		{
			$("acc_tips").innerHTML="√正确";
			$("acc_tips").className="right";
			return true;
		}
		else
		{
			$("acc_tips").innerHTML="× 用户名为2~11个字符";
			$("acc_tips").className="error";
			return false;
		}
	}
	else
	{
		$("acc_tips").className="info";
		$("acc_tips").innerHTML="用户名为2~11个字符";
	}
	return false;
}
function ckPho(s)
{
	if (s=='blur')
	{
		var reg=/^1[356789]\d{9}$/;
		if (reg.test($("phone").value))
		{
			$("phone_tips").innerHTML="√正确";
			$("phone_tips").className="right";
			return true;
		}
		else
		{
			$("phone_tips").innerHTML="× 手机号为11位数字";
			$("phone_tips").className="error";
			return false;
		}
	}
	else
	{
		$("phone_tips").className="info";
		$("phone_tips").innerHTML="手机号为11位数字";
	}
	return false;
}
function check()
{
	if (ckPho('blur')&ckAcc('blur'))
	{
		return true;
	}
	return false;
}
</script>
 </head>
 <body>
 <fieldset id="d1">
 <legend>注册</legend>
 <form method="get" onsubmit="return check()">
  <p>用户名：<input type="text" id="acc" name="acc" onblur="ckAcc('blur')" onfocus="ckAcc('focus')"/>
  <span id="acc_tips">用户名为2~11个字符</span></p>
  <p>手机号：<input type="text" id="phone" name="phone" onblur="ckPho('blur')" onfocus="ckPho('focus')"/>
  <span id="phone_tips">手机号为11位数字</span></p>
  <p><input type="submit" value="提交" style="float:right;margin-right:20px;"/></p>
  </form>
 </fieldset>
 </body>
</html>

第二节自动补全效果

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
	#tip
	{
		border:1px solid red;
		width:200px;
		position:absolute;
		left:0px;
		top:0px;
		background-color:white;
		display:none;
	}
	#tip div:hover
	{
		color:white;
		background-color:gray;
	}
  </style>

  <script type="text/javascript">
  function showTip(txt)
  {
	var div = document.getElementById("tip");
	//设置div的左边偏移与文本框左边的间距一致
	//txt.offsetLeft:元素的相对容器的左偏移（间距）
	div.style.left=txt.offsetLeft+"px";
	//txt.offsetHeight:元素自身高度
	div.style.top = (txt.offsetTop+txt.offsetHeight)+"px";
	div.style.width=txt.offsetWidth+"px";
	div.style.display="block";
  }
  </script>
 </head>

 <body>
  用户名:
  <!--按键抬起事件
     this:当前元素对象
  -->
  <input type="text" name="username" id="username" onkeyup="showTip(this)"/>
  <input type="text" name="phone" id="phone" onkeyup="showTip(this)"/>

  <div id="tip">
	<div>这是内容1</div>
	<div>这是内容2</div>
	<div>这是内容3</div>
	<div>这是内容4</div>
  </div>
 </body>
</html>

第三节 TAB选项卡

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
  #con
  {
	width:600px;
	border:0px solid red;
	margin:0px auto;
  }
  ul
  {
	list-style:none;
	margin:0px;
	padding:0px;
	/*background-color:white;*/
	/*overflow:auto;*/
	/*重点:设置ul高度，让div顶上来，让a底边与div上边框重叠*/
	height:35px;
  }
  ul li
  {
	/*元素水平浮动*/
	float:left;
  }
  ul li a
  {
	/*设置a标签为块状*/
	display:block;
	width:100px;
	height:30px;
	line-height:30px;
	border:5px solid black;
	text-align:center;
	margin-left:10px;
	/*color:white;*/
  }

  ul li a.on
  {
	/*重点2:设置a标签底边框压住div上边框，并且为白色，与div融为一体*/
	border-bottom-color:white;
  }

  #infos div
  {
	height:200px;
	border:5px solid black;
	padding:10px;
	display:none;
  }
  /*定义选中状态的div样式*/
  #infos div.on
  {
	display:block;
  }
  </style>

  <script type="text/javascript">
	function $(id)
	{
		return document.getElementById(id);
	}
	//选中某个选项卡
	function setTab(num)
	{
		//通过循环，去除a和div元素的选中样式
		for(var i=1;i<=4;i++)
		{
			//取消菜单的选中样式
			$("t"+i).className="";
			//取消div的选中样式
			$("info"+i).className="";
		}
		//设置当前点击的元素为选中
		$("t"+num).className="on";
		$("info"+num).className="on";
	}

	//自动轮换
	var curIndex=1;
	function autoChange()
	{
		setTab(curIndex);
		curIndex++;
		if(curIndex==5)
		{
			curIndex=1;
		}

		//定义器循环执行
		setTimeout(autoChange,2000);
	}
	//绑定页面加载事件
	window.onload=autoChange;
  </script>
 </head>

 <body>
  <div id="con">
	<ul id="tabs">
		<li><a href="javascript:setTab(1)" id="t1" class="on">菜单1</a></li>
		<li><a href="javascript:setTab(2)" id="t2">菜单2</a></li>
		<li><a href="javascript:setTab(3)" id="t3">菜单3</a></li>
		<li><a href="javascript:setTab(4)" id="t4">菜单4</a></li>
	</ul>
	<div id="infos">
		<div id="info1" class="on">信息1</div>
		<div id="info2">信息2</div>
		<div id="info3">信息3</div>
		<div id="info4">信息4</div>
	</div>
  </div>
 </body>
</html>

第四节图片轮播

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
	#con
	{
		width:500px;
		height:300px;
		border:1px solid red;
		margin:0px auto;
		/*将溢出的子元素内容隐藏*/
		overflow:hidden;
		/*让容器变为包含块*/
		position:relative;
		
	}
	#con img
	{
		width:500px;
		height:300px;
	}

	#con ul
	{
		/*设置ul为绝对定位*/
		position:absolute;
		right:10px;
		bottom:10px;

		list-style:none;
		margin:0px;
		padding:0px;
	}
	#con ul li
	{
		float:left;
		border:1px solid red;
		width:20px;
		height:20px;
		text-align:center;
		line-height:20px;

		background-color:white;
		margin-right:10px;
		/*鼠标放在元素上为手型*/
		cursor:pointer;
	}

	#con ul li.on
	{
		color:white;
		background-color:black;
	}
  </style>

  <script type="text/javascript">
	function $(id)
	{
		return document.getElementById(id);
	}
	//通过点击li设置对应图片显示
	function setImage(num)
	{
		//通过循环，设置img都隐藏，设置li都取消选中样式
		for(var i=1;i<=5;i++)
		{
			$("img"+i).style.display="none";
			$("num"+i).className="";
		}
		//设置当前点击项为显示状态
		$("img"+num).style.display="block";
		$("num"+num).className="on";
	}
	var curIndex=1;
	function autoChange()
	{
		setImage(curIndex);
		curIndex++;
		if(curIndex==6)
		{
			curIndex=1;
		}

		//定义器循环执行
		setTimeout(autoChange,2000);
	}
	//绑定页面加载事件
	window.onload=autoChange;
  </script>
 </head>

 <body>
  <div id="con">
	<div id="imgs">
		<img src="image/bg1.jpg" id="img1"/>
		<img src="image/bg2.jpg" id="img2"/>
		<img src="image/bg3.jpg" id="img3"/>
		<img src="image/bg4.jpg" id="img4"/>
		<img src="image/bg5.jpg" id="img5"/>
	</div>
	<ul>
		<li id="num1" class="on" onclick="setImage(1)">1</li>
		<li id="num2" onclick="setImage(2)">2</li>
		<li id="num3" onclick="setImage(3)">3</li>
		<li id="num4" onclick="setImage(4)">4</li>
		<li id="num5" onclick="setImage(5)">5</li>
	</ul>
  </div>
 </body>
</html>