实验 | Java Web开发从入门到实战

最新推荐文章于 2024-08-09 10:42:44 发布

mustard0416

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量180

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/mustard0416/article/details/120910036

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人网站</title>
<script type="text/javascript">

//去掉前后空格
function deltrim(x){
while(x.length>0&& x.charAt(0)==' ')
x=x.substring(1,x.length);
while(x.length>0&&x.charAt(x.length-1)==' ')
x=x.substring(0,x.length-1);
return x;
}

//非空验证
function isNull(elem,message){
var a=deltrim(elem.value);
if(a==""){
alert(message);
elem.focus();
return false;
}
return true;
}

//验证邮编
function checkecode(){
var exp=/^[0-9]+$/;
if(isNull(document.forms[0].ecode,"邮编不能为空！")){//验证非空
if(document.forms[0].ecode.value.length!=6){
alert("邮编长度为6位！");
document.forms[0].ecode.focus();
return false;
}
else{
if(!exp.test(document.forms[0].ecode.value)){
alert("邮编只能是数字！");
document.forms[0].ecode.focus();
return false;
}
}
return true;
}
else{
return false;
}
}

//验证Email
function checkEmail(){
var exp=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if(isNull(document.forms[0].email,"联系方式不能为空！")){//验证非空
if(!exp.test(document.forms[0].email.value)){
alert("邮箱格式错误！");
document.forms[0].email.focus();
return false;
}
return true;
}
else{
return false;
}
}

//提交按钮
function gogo(){
if(checkecode()&&checkEmail()){
document.forms[0].submit();
return true;
}
return false;
}

</script>
<style type="text/css">
div{
width:auto;
height:auto;
}
body{
font-family:YaHei;
font-size:16px;
margin:0px auto;
height:auto;
width:800px;
border:1px solid #9AC0CD;
}
#header{
height:100px;
width:800px;
font-size:20px;
text-align:center;
background-image:url(images/cloud.png);
background-repeat:no-repeat;
margin:0px 0px 3px 0px;
}
#navigator{
height:25px;
width:800px;
font-size:14px;
list-style-type:none;
}
#navigator li{
float:left;
}
#navigator li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:131px;
height:22px;
text-align:center;
background-color:#9AC0CD;
margin-left:2px;
}
#navigator li a:hover{
background-color:#68838B;
color:#FFFFFF;
}
#content{
height:auto;
width:780px;
line-height:1.5em;
padding:10px;
}
#content p{
font-size:14px;
text-indent:2em;
}
#content h3{
font-size:16px;
margin:10px;
}
#footer{
height:15px;
width:780px;
line-height:1em;
text-align:center;
background-color:#9AC0CD;
padding:10px;
}
*{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<form action=" " method="post" enctype="multipart/form-data">
<div id="header"><br>
<h1>MUSTARD的个人网站</h1>
</div>
<div id="navigator">
<ul id="navigator">
<li><a href="#div1">前言 | Foreword</a></li>
<li><a href="#div2">简介 | Resume</a></li>
<li><a href="#div3">相册 | Photo Album</a></li>
<li><a href="#div4">互动 | Interact</a></li>
<li><a href="#div5">树洞 | Tree Hole</a></li>
<li><a href="#div6">帮助 | Help</a></li>
</ul>
</div>
<div id="content"><br>
<div id="div1">
<h2>前言 | Foreword</h2><br>
<p>欢迎。</p><br>
</div>
<div id="div2">
<h2>简介 | Resume</h2><br>
<p>Hello，我是。</p>
<br>
</div>
<div id="div3">
<h2>相册 | Photo Album</h2><br>
<p>·南京 | 2019.6.14 ~ 2019.6.16</p>
<img src="images/Nanjing1.jpg" width="300" height="250">
<p>·长沙 | 2021.7.18 ~ 2021.7.22</p>
<img src="images/Changsha1.jpg" width="300" height="250">
<img src="images/Changsha2.jpg" width="300" height="250">
</div>
<div id="div4">
<br>
<h2>互动 | Interact</h2><br>
<p align="center">填个问卷，让我来认识你吧。</p><br>
<table style="margin: auto">
<tr>
<th>你是谁？</th>
<td><input type="text" value="" name="name"/></td>
</tr>
<tr>
<th>你的性别是？</th>
<td>
<input type="radio" value="male" name="sex" />男
<input type="radio" value="female" name="sex" checked/>女
</td>
</tr>
<tr>
<th>你来自哪里（邮编）？</th>
<td><input type="text" value="" name="ecode"/></td>
</tr>
<tr>
<th>联系方式是（邮箱）？</th>
<td><input type="text" value="" name="email"/></td>
</tr>
</table>
<br>
</div>
<div id="div5">
<h2>树洞 | Tree Hole</h2><br>
<p></p>
<table style="margin: auto">
<tr>
<th>留下你想说的话：</th>
<td><textarea name="" cols="50" rows="10"></textarea></td>
</tr>
<tr>
<td><input type="reset" value="重置"/></td>
<td><input type="button" value="提交" onclick="return gogo()"/></td>
</tr>
</table>
<br>
</div>
<div id="div6">
<h2>帮助 | Help</h2><br>
<p>如有问题请联系：</p>
</div>
</div>
<div id="footer">
<p>Copyright ©MUSTARD</p>
</div>
</form>
</body>
</html>

实验存档。

mustard0416

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实验 | Java Web开发从入门到实战

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>个人网站</title><script type="text/javascript">//去掉前后空格function deltrim(x){while(x.length>0&& x.charAt(0)==' ')x=x.substring(1,x.length);wh.
复制链接

扫一扫