用户注册表单的设计及验证

最新推荐文章于 2024-03-01 11:45:40 发布

可爱的小笼包

最新推荐文章于 2024-03-01 11:45:40 发布

阅读量3.8k

点赞数 3

分类专栏： JSP 文章标签： java eclipse

本文链接：https://blog.csdn.net/weixin_48864837/article/details/123620111

版权

JSP 专栏收录该内容

5 篇文章 3 订阅

订阅专栏

JSP程序设计程第二版
用户注册表单的设计及验证报告
用户注册表单的设计及验证

设备仪器/软件环境
1.Windows 10系统
2.JDK、eclipse、Tomcat

实验(实训)/目标
1.掌握表单元素的应用
2.完成表单信息的校验
3.完成表单中信息的选择提示
实验(实训)过程/步骤
1.设计用户注册页面。完成用户注册页面的编写。

<body>
<form action="" method="post" name="form1" οnsubmit="return userCheck()">
<table width="409" border="1">
<tr><td>用户名:</td>
<td><input type="text" name="username">
</td></tr>
<tr><td>密码:</td>
<td><input type="password" name="password">
</td></tr>
<tr><td>确认:</td>
<td><input type="password" name="repassword">
</td></tr>
     <tr><td>出生:</td>
<td><input type="text" name="born">
</td></tr> 
<tr><td>地址:</td>
<td><input type="text" name="address">   
    <tr><td>介绍:</td>
      <td><textarea name="introduce" rows="5" id="introduce">
</textarea></td>
</tr></table>
     <input type="submit" name="Submit" value="注册">
     <input type="reset" name="Submit2" value="重置">
</form>
</body>

用户名:
密码:
确认:
出生:
地址:
介绍:

2.实现用户注册页面中的表单信息是否为空的验证。

<script type="text/javascript">
     function userCheck() {
    	 if (document.form1.username.value == ""){
    		 window.alert("请输入用户名:"); 
return false;}
    	 if (document.form1.password.value == ""){
    		 window.alert("请输入用户密码:");
return false;}
    	 if (document.form1.repassword.value == ""){
    		 window.alert("请输入密码确认:");
return false;}
    	 if (document.form1.repassword.value != document.form1.password.value ){
    		 window.alert("您输入的两次密码并不相同");
return false;}
    	 if (document.form1.born.value == ""){
    		 window.alert("请输入出生日期:");
return false;}
    	 if (document.form1.address.value == ""){
    		 window.alert("请输入地址:");
return false;                      }
    	 if (document.form1.introduce.value == ""){
         window.alert("请输入自我介绍:");
return false;}
return true;}   
</script>

3.修改表单中地址信息为选择框，并在进行选择后弹出提示信息。

<select name="select" οnchange="alert('您选择了'+select.value)">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="重庆">重庆</option>
<option value="山西">山西</option>
</select>

结果记录与分析总结
一、运行截图
1.设计用户注册页面。完成用户注册页面的编写，运行截图如下:
在这里插入图片描述

2.实现用户注册页面中的表单信息是否为空的验证，运行截图如下:
在这里插入图片描述

3，修改表单中地址信息为选择框，并在进行选择后弹出提示信息，运行截图如下:
在这里插入图片描述

二、分析总结
HTML 和 JavaScript 语言是 JSP 网页开发的基础，JSP 网页是在 HTML 文本中嵌人 Java 和JavaScript代码。 JavaScript 语言主要包括:数据类型、常用语句、对象及常用事件。表单是 Web 应用（网站）的重要组成部分，通过表单可以收集用户提交的信息，例如姓名、密码、出生日期、地址、介绍等。本案例主要介绍了鼠标单机事件、下拉列表事件、判断输入框是否为空等知识点，通过本次实验，我能够掌握基本的 HTML 和JavaScript 语言，会编写一些简单而又实用的网页。

注册信息的整个代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
</head>
<script type="text/javascript">
     function userCheck() {
    	 if (document.form1.username.value == ""){
    		 window.alert("请输入用户名:");
    	 return false;
    	 }
    	 if (document.form1.password.value == ""){
    		 window.alert("请输入用户密码:");
    	 return false;
    	 }
    	 if (document.form1.repassword.value == ""){
    		 window.alert("请输入密码确认:");
    	 return false;
    	 }
    	 if (document.form1.repassword.value != document.form1.password.value ){
    		 window.alert("您输入的两次密码并不相同");
    	 return false;
    	 }
    	 if (document.form1.born.value == ""){
    		 window.alert("请输入出生日期:");
    	 return false;
    	 }
    	 if (document.form1.address.value == ""){
    		 window.alert("请输入地址:");
    	 return false;
    	 }
    	 if (document.form1.introduce.value == ""){
    		 window.alert("请输入自我介绍:");
    	 return false;
    	 }
    	 return true;
    	 
     }   
</script>
<%=new java.util.Date()%>
<br>
<%! int number=0;
void addNumber(){
 number++; 
 }%>
<% this.addNumber(); %>
本次网页的访问次数是：<%=number%>次
<br>
<body>
<form action="" method="post" name="form1" οnsubmit="return userCheck()">
<table width="409" border="1">
    <tr>
        <td>用户名:</td>
        <td><input type="text" name="username"></td>
    </tr>
    <tr>
        <td>密码:</td><td><input type="password" name="password"></td>
    </tr>
    <tr>
        <td>确认:</td><td><input type="password" name="repassword"></td>
    </tr>
     <tr>
        <td>出生:</td><td><input type="text" name="born"></td>
    </tr>   
    <tr>
        <td>地址:</td><td><input type="text" name="address">        
        <select name="select" οnchange="alert('您选择了'+select.value)">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="重庆">重庆</option>
    <option value="天津">天津</option>
    </select>  
      </td>      
    </tr>    
    <tr>
        <td>介绍:</td>
        <td><textarea name="introduce" rows="5" id="introduce"></textarea></td>
    </tr>
</table>
     <input type="submit" name="Submit" value="注册">
     <input type="reset" name="Submit2" value="重置">
</form>
</body>
</html>