`
哈达f
  • 浏览: 114533 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

注册表单

阅读更多 
<!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:#0066FF 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:#FF9900;
	}
#repswspan{
	margin-left:110px;
	}
	
.errorinfo{
	color:#FF0000;
	display:none;
	}
.focus{
	border:#0099FF 2px solid;
	}
.norm{
	border:#999999 1px solid;
	}
.error{
	border:#FF0000 2px solid;
	}
</style>

<script type="text/javascript">

function inputColor(input)
{
	input.className = "norm";
	input.onfocus = function()
	{
		this.className = "focus";
	}
}
window.onload = function()
{
	with(document.forms[0])
	{
		inputColor(user);
		inputColor(psw);
		inputColor(repsw);
		inputColor(mail);
	}
}

//校验方法。
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 checkUserDemo(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 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;
	var value2 = document.getElementsByName("psw")[0].value;
	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，动态效果。
	3.1在页面加载时，将所有的输入框默认的框线颜色以及定义获取焦点时的框线颜色。
    3.2进行内容校验。可以通过正则表达式完成，并通过框线的样式给用户提示。
    	通过对刚才用户名的校验的分析，发现代码重复度很高，为了提高复用性。
        将不同的内容错误参数传递，将相同的内容进行函数的封装。
	
-->


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


</body>
</html>

 

分享到：
| 表单检验
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics