JS 表单验证特效

最新推荐文章于 2024-07-03 14:13:51 发布

goature

最新推荐文章于 2024-07-03 14:13:51 发布

阅读量517

点赞数

文章标签： JS 表单验证

本文链接：https://blog.csdn.net/gcdnf16/article/details/99288791

版权

第八章表单验证高级特效

第一节表单提示特效

获得焦点和失去焦点样式

<!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.οnlοad=function(){
		var phone = document.getElementById("phone");
		phone.οnblur=sqjd;
		phone.οnfοcus=hdjd;
	}*/
  </script>
 </head>

 <body>
  手机:
  <input type="text" 
         name="phone" 
		 id="phone"
		 class="blur"
		 οnblur="this.className='blur'"
		 οnfοcus="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" οnsubmit="return check()">
  <p>用户名：<input type="text" id="acc" name="acc" οnblur="ckAcc('blur')" οnfοcus="ckAcc('focus')"/>
  <span id="acc_tips">用户名为2~11个字符</span></p>
  <p>手机号：<input type="text" id="phone" name="phone" οnblur="ckPho('blur')" οnfοcus="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" οnkeyup="showTip(this)"/>
  <input type="text" name="phone" id="phone" οnkeyup="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.οnlοad=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.οnlοad=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" οnclick="setImage(1)">1</li>
		<li id="num2" οnclick="setImage(2)">2</li>
		<li id="num3" οnclick="setImage(3)">3</li>
		<li id="num4" οnclick="setImage(4)">4</li>
		<li id="num5" οnclick="setImage(5)">5</li>
	</ul>
  </div>
 </body>
</html>

goature

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JS 表单验证特效

第八章表单验证高级特效第一节表单提示特效获得焦点和失去焦点样式<!DOCTYPE html><html> <head> <title> my page </title> <style type="text/css"> /*失去焦点时的样式*/ .blur { border:1px s...
复制链接

扫一扫