关闭

J2EE实验1:WEB基础

标签: htmljsj2ee
277人阅读 评论(0) 收藏 举报

实验1:WEB基础

实验要求:

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

  5. 将上述页面部署到服务器上,并通过访问该页面查看页面效果。
  6. 在页面内增加简单的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就提交表单,否则不提交表单。


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:73242次
    • 积分:1560
    • 等级:
    • 排名:千里之外
    • 原创:75篇
    • 转载:73篇
    • 译文:0篇
    • 评论:9条
    最新评论