DHTML技术---------------注册表单

原创 2013年12月04日 11:15:51


网页中的表单注册:

综合技术

1、html超文本标记语言,简单易学

2、javascript脚本语言,基于java编程语言

3、DOM编程

4、CSS样式;布局,美化网页


<!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>


<!--//样式表-->
<style type="text/css">
table{
	border: #CCCCCC 1px solid;
	width:600px;
	border-collapse: collapse;
	}
table td,table th{
	border:#0066FF 1px solid;
	padding:10px;
	}
table td{
	background-color: #FFFF99;
	}
table th{
	background-color: #33FF33;
	}/**/

#repswspan{
	margin-left:120px;
	}

.errorinfo{
	color: #FF0000;
	display:none;
	}

.focus{
	border: #00FF00 2px solid;
	}

.norm{
	border:#999999 1px solid;
	}
校验用户名错误颜色 确认密码距离左边120px 错误提示颜色 输入框颜色 默认颜色
.error{ 
	border:#FF0000 2px solid;
	}
</style>


<!--//javascript代码-->
<script type="text/javascript">

function inputColor(input)//给输入框加入颜色的函数
{	input.className="norm";
	input.onfocus=function()
	{
		this.className="focus";
	}
}
window.onload=function()	//只要一加载,form标签中所有的input项就调用加颜色函数
{
	with(document.forms[0])
	{
		inputColor(user);
		inputColor(psw);
		inputColor(repsw);
		inputColor(mail);
	}
	//alert(document.forms[0].nodeName);
}
/*window.onload=function()
{
	//document.forms[0].user.className="focus";
	document.forms[0].user.onfocus=function()
	{
		//alert(this.nodeName);
		this.className="focus";
	}	
}*/

/*
//校验用户名,麻烦的方法
function checkUser(userNode)
{
	var value=userNode.value;
	var regex=/^\w{3,5}$/;
	var divNode=document.getElementById("userdiv");
	if(regex.test(value))
	{
		userNode.className="norm";
		divNode.style.display="none";
	}
	else
	{
		userNode.className="error";
		divNode.style.display="block";
	}
}	
*/
//优化校验方法
function check(inputNode,regex,divId)
{
	var b=false;
	var divNode=document.getElementById(divId);
	
	if(regex.test(inputNode.value))
	{
		inputNode.className="norm";
		divNode.style.display="none";	
		b=true;
	}
	else
	{
		inputNode.className="error";
		divNode.style.display="block";	
	}
	return b;	
	
}
//校验用户名
function checkUser(userNode)
{
	var regex=/^\w{3,5}$/;
	
	return check(userNode,regex,"userdiv");
}
//校验密码
function checkPsw(pswNode)
{
	var regex=/^[a-z0-9]{3,5}$/i;
	return check(pswNode,regex,"pswdiv");
}
//校验确认密码
function checkRepsw(repswNode)
{
	var b=false;
	
	var value1=repswNode.value;
	//alert(value1);
	var value2=document.getElementsByName("psw")[0].value;
	//alert(value2);
	var divNode=document.getElementById("repswdiv");
	if(value1==value2)
	{
		repswNode.className="norm";
		divNode.style.display="none";
	
		b=true;
	}
	else{
		repswNode.className="error";
		divNode.style.display="block";	
	}
	return b;
}
//校验mail
function checkMail(mailNode)
{
	var regex=/^\w+@\w+(\.\w+)+$/;
	return check(mailNode,regex,"maildiv");
}

//校验表单中所有数据是否正确,才可以提交成功
function checkForm(formNode)
{
	with(formNode)
	{
		if(checkUser(user)&&checkPsw(psw)&&checkRepsw(repsw)&&checkMail(mail))
		{
			event.returnValue=true;
		}
		else
		{
			event.returnValue=false;
		}
	}

}
</script>

</head>

<body>
<!--
1.定义页面。
	通过表格格式化表单,表格行都有一个自己的背景颜色。
   	讲单元格中的数据通过div进行封装,以便操作。
2.定义样式。
	表格的样式。
    div的样式。
3.动态效果。

4.动态效果。
	在页面加载时,将所有的输入框默认颜色以及定义获取焦点时的框线颜色;;
	进行内容校验,可以通过正则表达式完成,并通过框线的样式给用户提示。
    	通过对用户名的校验分析,发现代码重复性很高,为了提高复用性。
        将不同的内容错误提示数据,将相同的内容进行函数封装。
-->
注册表单二
<form  onsubmit="checkForm(this)">
	<table>
    	<tr>
    		<th>注册用户</th>
    	</tr>
        <tr>
        	<td> 
            	<div>用户</div>
                <div><input type="text" name="user" onblur="checkUser(this)"/></div>
                <div class="errorinfo" id="userdiv">用户名错误,请按要求输入</div>
                <div>用户名必须是3-5位,由字母(a-z),数字(0-9),下划线(_)组成</div>
            </td>
           
        </tr>
        <tr>
            <td>
            	  <div><span>密码</span>  <span id="repswspan">  确认密码</span></div>
               	<div>
                    <input type="password" name="psw"  onblur="checkPsw(this)" />
                    <input type="password" name="repsw"  onblur="checkRepsw(this)" />
               	</div>
               	<div class="errorinfo" id="pswdiv">密码格式错误,请按规范输入</div>
              	 <div class="errorinfo" id="repswdiv">两次密码输入不一致</div>
              	 <div>密码必须是3-5位,由字母(a-z),数字(0-9)组成</div>
           	</td>
        </tr>
        <tr>
        	 <td>
        		<div> 邮件地址</div>
				<div><input type="text" name="mail"  onblur="checkMail(this)" /></div>
                <div class="errorinfo" id="maildiv">邮箱地址错误,请按要求填写。</div>	
       	
           </td>
        </tr>
      
        <tr>
    		<th>
            	<input type="submit" value="提交数据" />
            </th>
    	</tr>
    </table>


</form>


<marquee direction="down" behavior="alternate">
   		 <font size="7" color="#00FF33">
			我会飞-----------
            <img  src="2.jpg"alt="图片说明文子"  width="150px" height="100px"/>
            <font size="7" color="#00FF33">
				<holleo,你ggg好!!- >
            </font>
            </font>
	</marquee>
</body>
</html>




网页效果:





DHTML 大全

方法add向 areas, controlRange 或 options 集合中添加一个元素。add创建一个新的 namespace 对象并将其添加到集合中。addBehavior给元素附加一个行为。...
  • helanye
  • helanye
  • 2009年07月11日 22:45
  • 2665

什么是动态HTML——DHTML?动态HTML的主要功能

DHTML是Dynamic HTML的简称,中文译为“动态超文本标记语言”,主要用途是提**TML页面的交互性和可操作性。它是建立在传统HTML基础上的客户端动态技术,是一种技术的总称,它通过HTML...
  • renpinghao
  • renpinghao
  • 2011年12月04日 20:26
  • 1796

xhtml,xml,html,和dhtml的关系和区别

XHTML产生的原因,一方面是为了和未来的XML大规模的应用接轨,一方面还要兼容目前的数以万计的用HTML编写的网页以及他们的设计者,开发者相兼容,于是便出现了这个东西。以HTML编写的网页中,标记使...
  • a519781181
  • a519781181
  • 2016年07月29日 10:47
  • 1747

HTML5 - 用户注册表单

用户注册
  • wangzi11322
  • wangzi11322
  • 2015年04月27日 11:25
  • 5282

HTML+CSS实现的简单注册表单

提交用户信息 body, div, td, input {font-size:12px; margin:0px; } select {height:20px; width:300px; } .ti...
  • wangluozhangleilei
  • wangluozhangleilei
  • 2014年01月24日 10:49
  • 2994

简单制作用户注册表单

表单概述:        表单主要用于收集网页浏览者的相关信息,其标签为,表单的基本格式语法如下:                        其中,action="url"指定处理提交表单...
  • zm13722251407
  • zm13722251407
  • 2016年06月05日 20:50
  • 1901

DHTML、XHMLT、HTML的区别

Dhtml是在静态html的基础上综合和其它动态的技术而成的网页技术;DHTML=HTML+CSS+JavaScript+DOM HTML则是纯粹的静态网页技术 XHTML则是在HTML中...
  • u010874036
  • u010874036
  • 2016年08月19日 15:54
  • 691

DHTML技术

使用基本思路: 用标签封装数据——–HTML范畴 定义样式————–css范畴 明确事件源、事件、要处理的节点——dom范畴 明确具体的操作方式(事件处理的内容)——-js范畴...
  • new___Smile
  • new___Smile
  • 2016年06月20日 16:55
  • 282

DHTML动态样式的作用

DHTML 的动态样式的作用是() DHTML实现了网页从Web服务器下载后无需再经过服务的处理,而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如,当鼠标指针移到文章段落中时,段落能...
  • qq_27437967
  • qq_27437967
  • 2017年05月22日 23:30
  • 333

从HTML到DHTML速成(跨浏览器)

拿到DHTML手册、javaScript手册、CSS手册网上到处有,最好是中文的使用FireFox的FireBug插件安装和启用:用FireFox访问 https://addons.mozilla.o...
  • lenel
  • lenel
  • 2007年09月13日 21:49
  • 1685
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DHTML技术---------------注册表单
举报原因:
原因补充:

(最多只允许输入30个字)