您的位置：首页 > 其它

J2EE实验1：WEB基础

2015-11-21 15:16 197 查看

实验1：WEB基础

实验要求：

通过解压方式安装Tomcat服务器，安装目录为C:\ apache-tomcat-6.0.18
将上面的Tomcat停止，启动系统中已经安装的Tomcat，并重新测试其运行效果。
通过另一台机器访问所安装的Tomcat服务器。
编写实现用户注册的HTML页面，表单的action属性为任意。页面效果如下图所示（为了便于了解表格的应用情况，图示页面特意增加了表格边框，设计完成后应把表格边框去掉）



将上述页面部署到服务器上，并通过访问该页面查看页面效果。
在页面内增加简单的JavaScript验证代码，以验证用户名称为空、用户名称或密码长度不足等问题（选做）。

这个实验很简单，直接贴代码了。

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实验1</title>
</head>
<body>
<script type="text/javascript">
function FunSubmit(){
if (document.myform.Account.value == ""){
alert("帐号不能为空！");
return false;
}
if (document.myform.KeyWord.value == ""){
alert("密码不能为空！");
return false;
}
if (document.myform.KeyWord.value.length < 6) {
alert("密码长度不足6位！");
return false;
}
if (document.myform.KeyWordAgain.value != document.myform.KeyWord.value){
alert("两次密码不一致！");
return false;
}
if (document.myform.Answer.value == ""){
alert("密保答案不能为空！");
return false;
}
return true;
}
</script>
<form action = "RegistSucceed.html" name ="myform" method=post>
<h1>HTML基础-注册表单</h1>
<hr/>
<center>
<table  width = "50%" >
<tr>
<td width =" 25%"  align= "right">登陆名称:</td>
<td width = "25%"><input type="text" name = "Account" style="width:100" /></td>
</tr>
<tr>
<td align = "right">登陆密码:</td>
<td><input type="password" name = "KeyWord" style="width:100"/></td>
</tr>
<tr>
<td align = "right">密码确认:</td>
<td><input type="password" name = "KeyWordAgain" style="width:100"/></td>
</tr>
<tr>
<td align = "right">密码保护问题:</td>
<td>
<select name="ProtectProblem">
<option>你的宠物叫什么名字？</option>
<option>你妈妈的生日是什么？</option>
<option>你爸爸的生日是什么？</option>
</select>
</td>
</tr>
<tr>
<td align = "right">问题答案:</td>
<td><input type="text" name="Answer" style="width:100"/></td>
</tr>
<tr>
<td align = "right">性别:</td>
<td>
<input type="radio" name = "Sex" value="男" checked = "checked"/>男
<input type="radio" name = "Sex" value="女"/>女
</td>
</tr>
<tr>
<td colspan="2">
<center>
<input type="submit" value="注册" onclick="return FunSubmit();"/>
<input type="reset" value="重填"/>
</center>
</td>
</tr>
</table>
</center>
</form>
<hr/>
<center>
<h6>20135301</h6>
</center>
</body>
</html>


其中需要注意的是JS代码，JS对于WEB控件的使用都是通过document方法来引用的。还有JS中无须定义变量类型，所以JS的函数也不用写返回值，直接return就可以了。

在submit按钮的onclick属性中加return FunSubmit()的意思就是，如果FunSubmit返回true就提交表单，否则不提交表单。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航