JSP实验-简单页面设计

最新推荐文章于 2022-09-18 16:28:00 发布
DaYinYi
最新推荐文章于 2022-09-18 16:28:00 发布
阅读量2k
点赞数
本文链接：https://blog.csdn.net/qq_36998053/article/details/89043355
版权
" ' javascript
<!DOCTYPE html>
<html>
<head>
<title>简单页面设计</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<style type="text/css">
body{
	background-color:#FFF;
	font-size:15px;
	width:700px;
	margin:0,auto;
	font-family:宋体;
}
div{
	box-sizing:border-box;
	line-height:1.3;
}
.one{ margin:0 auto;}/*页面居中显示*/
.top,.center,.bottom{
	width:100%;
	height:auto;
}
.left{
	width:35px;
	float:left;
	height:430px;
}
.right{
	width:50px;
	float:right;
	height:430px;
}
#left{
	width:30%;
	float:left;
	padding:0 8px;
	height:auto;
}
#right{
	width:50%;
	position:relative;
	float:right;
	height:auto;
	padding-top:40px;
}
#line{
	height:380px;
	border-left-style:solid;
	border-width:2px;
	border-color:green;
}
#banner{
	width:100%;
}
</style>
<body class="one">
	<div class="top">
		<div id="banner"><img src="images/01.gif"></div>
	</div>
	<h1 style="margin:-6px"></h1>
	<div class="center">
		<div class="left"><img src="images/02.gif"></div>
		<div class="right"><img src="images/04.gif"></div>
		<div id="left">
			<img src="images/reg.gif"><strong>注册帮助</strong><br />
			<ul>
				<li>会员名：为会员登录网站的通行证，长度控制在3-20个字符之内。</li><br />
				<li>密码：请设定在6-20位之间。</li><br />
				<li>确认密码：确认密码必须与密码一致。</li><br />
				<li>Email：请填写有效的Email地址，以便于与您联系。</li>
			</ul>
		</div>  
		
		<div id="right">
			<form action="questionaire.html" name="form1" method="post" onsubmit="return check(this)">
				<table style="border-collapse:separate; border-spacing:0px 10px;">
					<tr>
						<td>用户名：</td>
						<td><input type="text" name="name" size=25 placeholder="长度控制在3-20个字符之内" 
								validChar="[A-Za-z0-9]{3,20}" isRequired="ture"/>
							<span class="feedbackHide" id="nameMsg"></span></td>
					</tr>
					<tr>
						<td>密&nbsp;码：</td>
						<td><input type="password" name="password1" size=26 placeholder="请设定在6-20位之间"/></td>
					</tr>
					<tr></tr>
					<tr>
						<td>确认密码：</td>
						<td><input type="password" name="password2" size=26 /></td>
					</tr>
					<!-- <tr>
						<td>密&nbsp;码：</td>
						<td><input type="text" name="apassword" size=26 placeholder="请设定在6-20位之间"
								validChar="\d{6,20}" isRequired="ture"/>
							<span class="feedbackHide" id="passwordMsg"></span></td>
					</tr>
					<tr></tr>
					<tr>
						<td>确认密码：</td>
						<td><input type="text" name="bpassword" size=26 
								validChar="\d{6,20}" isRequired="ture"/>
							<span class="feedbackHide" id="bpasswordMsg"></span></td>
					</tr> -->
					<tr>
						<td>性&nbsp;别：</td>
						<td>
							<input type="radio" name="gender" value="male"/>男
							<input type="radio" name="gender" value="female"/>女
						</td>
					</tr>
					<tr>
						<td>E-mail:</td>
						<td><input type="text" name="mail" size=35 
								validChar="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" isRequired="ture"/>
							<span class="feedbackHide" id="mailMsg"></span>
								</td>
					</tr>
					<tr>
						<td><input type="submit" name="Submit" value="提交"/>
						&nbsp;&nbsp;<td><input type="reset" name="cancel" value="重置"/></td>
					</tr>
				</table>
			</form>
		</div>
		<table id="line">
			<tr>
				<td valign="top"></td>
			</tr>
		</table>
	</div>	
</body>
</html>

<script LANGUAGE="JavaScript">
<!-- 
//提交检查
function check(vform){
	//遍历表单中每个表单域
	for(var i=0;i<vform.elements.length;i++){
		//如果表单域是文本框的话，进行定义好的验证
		if(vform.elements[i].type=="text"){
			//取得验证结果
			var checkResult=checkTextBox(vform.elements[i]);
			//取得文本框名，getAttribute 获取指定标签属性的值
			var name=vform.elements[i].getAttribute("name");
			//验证通过
			if(checkResult){
				//getElementById通过通过控件ID取得元素的值
				document.getElementById(name+"Msg").clasName="feedbackHide";
			}
			else{
				//验证不通过，显示提示文字并置焦点
				document.getElementById(name+"Msg").className="feedbackShow";
				vform.elements[i].focus();
				return false;
			}
		}
	}
	var pd1= document.form1.password1.value; 
	if(document.form1.password1.value.length<6||document.form1.password1.value.length>20){
		alert("请输入符合条件的密码");
		return false;
	}
	
	var pd2= document.form1.password2.value; 
	if(document.form1.password2.value.length<6||document.form1.password2.value.length>20){
		alert("请再次输入密码！");
		return false;
	}
	
	if(pd1 !== pd2){
		alert("两次密码不相同");
		return false;
	}
	return true;
}

//检查文本框
function checkTextBox(vTextBox){
	//取得文本框中允许输入的合法文字正则表达式
	var validChar=vTextBox.getAttribute("validChar");
	//取得文本框中是否必须检查的标志
	var isRequired=vTextBox.getAttribute("isRequired");
	//取得文本框的输入
	var inputValue=vTextBox.value;
	//如果是非必填字段且没有输入则返回真
	if(isRequired!="true"&&inputValue.length<1){
		return true;
	}
	//否则进行正则表达式验证
	else{
		var regexStr="^"+validChar+"$";
		var regex=new RegExp(regexStr);
		return regex.test(inputValue);
	}
}
//-->
</script>