java web实验2客户端综合编程

一、实验目的与要求:
(简述本次实验要求达到的目的,涉及到的相关知识点,实验的具体要求)
1、实验目的
1)编写HTML网页,掌握HTML表单、表格等常用标签的使用,掌握CSS的语法和应用。
2)编写JavaScript代码,熟悉并掌握JavaScript的基本语法、控制结构及函数,掌握JavaScript预定义对象、浏览器对象的使用。
2、实验要求
1)掌握HTML表单、表格等常用标签的使用,理解表单提交的过程
2)掌握CSS的基本语法和应用;
3)熟悉并掌握JavaScript的基本语法、控制结构及函数;
4)掌握JavaScript预定义对象、浏览器对象的使用;
5)将JavaScript代码嵌入或调入HTML页面,并完成指定效果;
6)写出实验报告。
二、实验内容
(根据本次实验项目的具体任务和要求,完成相关实验内容,可包括:实验仪器、算法原理、实验设备选型及连线图、算法描述或流程图、源代码、实验运行步骤、关键技术、测试数据与实验结果分析及其它;可以设置二级或三级标题 )
1、实验内容
在Eclipse环境下编写HTML代码,应用CSS技术,编写JavaScript代码,调入或嵌入HTML页面中。
2、实验步骤
1)进入Eclipse环境,导入实验一所建的Web Project;
2)开发完成bookAdd.html网页,通过浏览器访问该页面,并观察表单提交数据的过程
3)新建一个HTML网页,网页上有一个姓名输入框、密码输入框、性别单选按钮组和一个提交按钮,要求用户提交时检查姓名不能为空,密码长度在6到10位之间,性别项不能为空,如果不符合标准则不允许提交,并提示相应错误信息;
2、实验结果
(1)这是一个关于网上图书管理系统的一个网页bookAdd.html。
在这里插入图片描述
2、表单验证
在这里插入图片描述
在这里插入图片描述
书籍管理系统源代码

<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<title>增加书籍</title>
<style>
        #formBox1{
           padding:1px 10px 30px 0px;
 width: 180px;
 height: 240px;
 border: 1px solid #ccc;
 position: absolute;
 top:20px;
 bottom: 140px;
 left:0px;
 right: 1000px;
 margin: auto;
 }
       
    </style>
</head>

<body  bgcolor="#DAEDFA">

<div   style="border:solid ">
<h1 align="center" style="font-size:200%"  >网上书店后台管理系统</h1>
</div>
<div id="formBox1">
<h3>
          目录
        </h3>
<div >
<a href="#"  target="_blank">·书籍信息管理</a>
<br><br>
<a href="#"  target="_blank">·其他模块管理</a>
<br><br>
<a href="#"  target="_blank">·其他模块管理</a>
<br><br>
<a href="#"  target="_blank">·其他模块管理</a>
<br><br>
<a href="#"  target="_blank">·其他模块管理</a>
</div>
</div>

<form action="" method="post" name="form1" target="_blank" id="form1" >
  <table width="50%" height="150" border:"1" style="position:absolute;left:500px;top:125px">
  <tr><td style="font-size:125%">基本信息</td></tr>  
    <tr> 
      <td width="19%">书号:</td>
      <td width="81%"><label for="number"></label>
      <input name="number" type="text"  size="25" maxlength="30" /></td>
    </tr>
    <tr>
      <td>书名:</td>
      <td><label for="name"></label>
      <input name="name" type="text" size="25" maxlength="30" /></td>
    </tr>
    <tr>
      <td>作者:</td>
      <td><label for="author"></label>
      <input name="name" type="text"  size="25" maxlength="30" /></td>
    </tr>
    <tr>
      <td>出版社: </td>
<td><select name="PressName">

<option value="chose">--请选择 --</option>
<option value="THU">清华大学出版社</option>
<option value="railway">铁道 出版社</option>
<option value="railway">人民邮电出版社</option>
</select>
</td>
    </tr>
    <tr>
      <td>出版日期:</td>
      <td><label for="publicationdate"></label>
      <input name="publicationdate" type="text"  size="25" maxlength="30" /></td>
    </tr>
    <tr>
      <td>价格:</td>
      <td><label for="price"></label>
      <input name="price" type="text"  size="25" maxlength="30" /></td>
    </tr>
    <tr>
      <td>库存位置:</td>
      <td><label for="location"></label>
      <input name="location" type="text"  size="25" maxlength="30" /></td>
    </tr>
    
    <tr>
    <td>类别:</td>
    <td>
    <label><input name="kinds" type="radio" value="1" id="normal" />普通</label> 
    <label><input name="kinds" type="radio" value="2" id="new"    />新书</label> 
    <label><input name="kinds" type="radio" value="3" id="rare"   />精品</label> 
    </td>
   <tr>
    <td>内容简介: </td>
    <td><textarea name="comment" rows="10" cols="60"></textarea></td>
    </tr> 
    <tr>
      <td >
      <input type="submit" name="button" id="button1" value="提交" />
      </td>
      <td> <input type="submit" name="button" id="button2" value="重置" />
      </td>
    </tr>
  </table>
</form>
</body>
</html>

客户端验证源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style>
        #formBox{
            padding: 10px;
 width: 220px;
 height: 150px;
 border: 1px solid #ccc;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 }
        #formBox div{
            margin-top: 5px;
 }
        #formBox div input{
            box-sizing: border-box;
 padding: 5px;
 }
    </style>
</head>
 <body bgcolor="CC9999">
  <div id="formBox">
 <form name="myform" action="" method="get" onclick="return checkForm();">
 <div>
 姓名:<input type="text" name="name"><p>
 </div>
 <div>
 密码:<input type="password" name="code"><p>
 </div>
 <div>
 性别:<input type="radio" name="a1" value="1" onClick="a=this.value"><input type="radio" name="a1" value="2" onClick="a=this.value"><p>
	 </div>
	 <input type="button" value="提交" onclick="checkForm();">
</form>
</div>
</body>
<script type="text/Javascript">
function checkForm()
{
if(myform.name.value=="")
{
  alert("用户名不能为空")
  myform.name.focus();
  return false;
}
if(myform.code.value=="")
	{
	alert("密码不能为空!")
	myform.code.focus();
	return false;
	}
if(myform.code.value.length<6||myform.code.value.length>10)
{
  alert("密码长度在6-10之间");
  myform.code.focus();
  return false;
  }
var a=myform.a1;
var result =false;
for (var i=0;i<a.length;i++)
{
  if (a[i].checked)
  result=true;
}
 if(!result)
 {
 alert("请选择性别");
 return false;
 }
}
</script>
</html>
展开阅读全文

Windows版YOLOv4目标检测实战:训练自己的数据集

04-26
©️2020 CSDN 皮肤主题: 游动-白 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值