表单验证与页面跳转-优快云博客

本文链接：https://blog.youkuaiyun.com/yunlang2012/article/details/21861993

HTML部分

<!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=gb2312" />
<meta name="description" content="MySpace By Young Studio @王洋" />
<link rel="stylesheet" href="css/frame.css" media="screen" />
<link rel="stylesheet" href="css/test7.css" media="screen" />
<script type="text/javascript" src="js/test.js"></script>
<title>Register_test6</title>
</head>
<body>
<div id="content">
	<h1>RegSpace By Young Studio</h1><hr />
	<!--注册表单-->
	<div id="reg">
		<form name="form1" method="post" action="">
			<div>姓名：<input type="text" name="name" class="form_input" placeholder="请输入姓名" />
			<label class="la" id="l_name"></label></div><br />
			
			<div>年龄：<input type="text" name="age" class="form_input" placeholder="请输入年龄（〉17）" />
			<label class="la" id="l_age"></label></div><br />
			
			<div>体重：<input type="text" name="weight" class="form_input" placeholder="请输入体重（30-150kg）" />
			<label class="la" id="l_weight"></label></div><br />
			
			<div>班级：<input type="text" name="class" class="form_input" placeholder="请输入班级" />
			<label class="la" id="l_class"></label></div><br />
			
			<div>密码：<input type="password" name="pwd" class="form_input" placeholder="例如：12345678" />
			<label class="la" id="l_pwd"></label></div><br />
			
			<div>重复密码：<input type="password" name="repwd" class="form_input" placeholder="请重复输入密码" style="margin-left:8px;position:relative;" />
			<label class="la" id="l_repwd"></label></div><br />
			
			<div>Email：<input type="text" name="email" class="form_input" placeholder="请输入email" style="margin-left:33px;position:relative;" />
			<label class="la" id="l_email"></label></div><br />
			
			<input type="button" value="注册" class="form_input" οnclick="return reg();" />
		</form>
	</div><!--#reg-->
	<div id="sel">
		<form name="form3" method="post" action="">
			<select size="1" id ="mylink" name="mylink">
				<option value="0" >我的个人主页_test1</option>
				<option value="1" >省份明细_test2</option>
				<option value="2" >专业明细_test3</option>
				<option value="3" >书籍明细_test4</option>
				<option value="4" >烟台故事_test5</option>
				<option value="5" >买水果_test6</option>
				<option value="6" >注册测试_test7</option>
				<option value="7"  selected="selected">JS实现图片展示_test8</option>
				<option value="8" >大作业_test9</option>
			</select>
			<input type="button" value="跳转" οnclick="move(this)" />
		</form>
	</div><!--#sel-->
</div><!--#content-->
</body>
</html>

CSS部分

/* CSS Document Create By Young Studio @王洋*/
body{
	background-image:url(../images/bg5.jpg);
	color:#FFFFFF;
}
#reg{
	-webkit-margin-left:500px;
	-moz-margin-left:500px;
	margin-left:500px;
	-webkit-margin-top:30px;
	-moz-margin-top:30px;
	margin-top:30px;
	position:relative;
	font-family:"Microsoft YaHei UI";
}
input.form_input{
	height:32px;
	font-size:24px;
	margin-left:40px;
}
.la{
	-webkit-margin-left:10px; 
	-moz-margin-left:10px; 
	margin-left:10px; 
	position:relative;
}
#sel{
	-webkit-margin-left:40px;
	-moz-margin-left:40px;
	margin-left:40px;
	-webkit-margin-top:110px;
	-moz-margin-top:110px;
	margin-top:110px;
	-webkit-margin-bottom:55px;
	-moz-margin-bottom:55px;
	margin-bottom:55px;
	position:relative;
}
#select{
	background-color:#FFFFFF;
	-webkit-border:1px #000 solid;
	-moz-border:1px #000 solid;
	border:1px #000 solid;
}

JS部分

// JavaScript Document Create By Young Studio @王洋
//跳转函数
function move()
{	
	if(mylink.value == "0")window.location.href="test1.html";
	if(mylink.value == "1")window.location.href="test2.html";
	if(mylink.value == "2")window.location.href="test3.html";
	if(mylink.value == "3")window.location.href="test4.html";
	if(mylink.value == "4")window.location.href="test5.html";
	if(mylink.value == "5")window.location.href="test6.html";
	if(mylink.value == "6")window.location.href="test7.html";
	if(mylink.value == "7")window.location.href="test8.html";
	if(mylink.value == "8")window.location.href="test9.html";
}
//注册页面验证
function reg()
{
	if(!document.getElementById) return;
	var cname = document.form1.name;
	var cage = document.form1.age;
	var cweight = document.form1.weight;
	var cclass = document.form1.class;
	var cpwd = document.form1.pwd;
	var crepwd = document.form1.repwd;
	var cemail = document.form1.email;
	var regage = /^[-\+]?\d+(\.\d+)?$/;  //验证年龄格式
	var regweight = /^[-\+]?\d+(\.\d+)?$/;  //验证体重格式
	var regemail =/^([a-zA-Z0-9_\.])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;  //验证邮箱格式的正则式
	
	//姓名空值判断
	if(cname.value == ""){document.getElementById("l_name").innerHTML = "×姓名不能为空！";document.getElementById("l_name").focus();return false;}
	else{
		document.getElementById("l_name").innerHTML = "√"
	}
	
	//年龄空值、格式、大小判断
	if(cage.value == ""){
		document.getElementById("l_age").innerHTML = "×年龄不能为空！";
		cage.focus();
		return false;
	}
	else if(!cage.value.match(regage)){
		document.getElementById("l_age").innerHTML = "×年龄格式错误，只允许数字组合";
		cage.focus();
		return false;
	}
	else if(cage.value < 17){
		document.getElementById("l_age").innerHTML = "×年龄不能小于17岁";
		cage.focus();
		return false;
	}
	else{
		document.getElementById("l_age").innerHTML = "√"
	}
	
	//体重空值、格式、大小判断
	if(cweight.value == ""){
		document.getElementById("l_weight").innerHTML = "×体重不能为空！";
		cweight.focus();
		return false;
	}
	else if(!cweight.value.match(regage)){
		document.getElementById("l_weight").innerHTML = "×体重格式错误，只允许数字组合";
		cweight.focus();
		return false;
	}
	else if(cweight.value < 30 || cweight.value > 150){
		document.getElementById("l_weight").innerHTML = "×体重必须界于30-150kg之间";
		cweight.focus();
		return false;
	}
	else{
		document.getElementById("l_weight").innerHTML = "√"
	}
	
	//班级空值判断
	if(cclass.value == ""){
		document.getElementById("l_class").innerHTML = "×班级不能为空！";
		cclass.focus();
		return false;
	}
	else{
		document.getElementById("l_class").innerHTML = "√"
	}
	
	//密码空值、长度判断
	if(cpwd.value == ""){
		document.getElementById("l_pwd").innerHTML = "×密码不能为空！";
		cpwd.focus();
		return false;
	}
	else if(cpwd.value.length < 8){
		document.getElementById("l_pwd").innerHTML = "×密码不得小于八位";
		cpwd.focus();
		return false;
	}
	else{
		document.getElementById("l_pwd").innerHTML = "√"
	}
	
	//重复空值、密码判断
	if(crepwd.value == ""){
		document.getElementById("l_repwd").innerHTML = "×重复密码不能为空！";
		crepwd.focus();
		return false;
	}
	else if(!crepwd.value.match(cpwd.value)){
		document.getElementById("l_repwd").innerHTML = "×两次密码不一致";
		crepwd.focus();
		return false;
	}
	else{
		document.getElementById("l_repwd").innerHTML = "√"
	}
	
	//邮箱空值、格式判断
	if(cemail.value == ""){
		document.getElementById("l_email").innerHTML = "×Email不能为空！";
		cemail.focus();
		return false;
	}	
	else if(!cemail.value.match(regemail)){
		document.getElementById("l_email").innerHTML = "×邮箱格式错误";
		cemail.focus();
		return false;
	}
	else{
		document.getElementById("l_email").innerHTML = "√"
	}
	
	return true;
}

一个简单的验证网页