实验二 JavaScript应用程序设计

silence_Bar

已于 2022-10-12 09:39:29 修改

阅读量485

点赞数 2

分类专栏： Java Web 文章标签： javascript 前端 servlet

于 2022-10-12 09:37:00 首次发布

本文链接：https://blog.csdn.net/qq_55673797/article/details/127275854

版权

Java Web 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

实验二 JavaScript应用程序设计

实验内容与结果

1、编写一个雇员注册的表单，要求输入以下内容：雇员编号、雇员姓名、雇员工作、雇佣
日期、基本工资和奖金。
2、对上面的表单进行 JavaScript 验证，验证要求如下：
(1) 雇员编号：只能是数字
(2) 雇员姓名：不能为空
(3) 雇员工作：不能为空
(4) 雇佣日期：必须是日期格式，即 2012-02-02
(5) 基本工资：必须是数字（小数）
(6) 奖金：必须是数字（小数）

实验思路：先设计HTML表单，对表单进行JavaScript验证，设计雇员类，导入JSP文件后获取输入的内容

HTML表单：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function check(){
		var id = document.myform.id.value;
		var reg=/^[0-9]\d*$|^0$/;   
	    if(reg.test(id)!=true)
	    {
	    	alert("编号必须为数字！");
	    	return false;
	    }
	    var name = document.myform.name.value;
	    if(name.length==0){
	    	alert("姓名不能为空！");
	    	return false;
	    }
	    var job = document.myform.job.value;
	    if(job.length==0){
	    	alert("工作不能为空！");
	    	return false;
	    }
	    var date = document.myform.date.value;
	    if(!(date.match("^[0-9]{4,4}-[0-9]{2,2}-[0-9]{2,2}$"))){
	    	alert("日期格式错误！");
	    	return false;
	    }
	    var salary = document.myform.salary.value;
	    if(!(salary.match("^[0-9]{1,9}.[0-9]{2,2}$"))){
	    	alert("工资必须是小数！");
	    	return false;
	    }
	    var bonus = document.myform.bonus.value;
	    if(!(bonus.match("^[0-9]{1,9}.[0-9]{2,2}$"))){
	    	alert("奖金必须是小数！");
	    	return false;
	    }
	}
</script>
</head>
<body>
<form method="post" action="register.jsp" name="myform" onSubmit="return check(this)">
雇员编号：<input type="number" name="id"><br>
雇员姓名：<input type="text" name="name"><br>
雇员工作：<input type="text" name="job"><br>
雇佣日期：<input type="text" name="date"><br>
基本工资：<input type="text" name="salary"><br>
奖&nbsp;&nbsp;&nbsp;&nbsp;金：<input type="text" name="bonus"><br>
<input type="submit" value="提交"><input type="reset" value="重置">
</form>
</body>
</html>

雇员类：

package demo;

public class employee {
	private String emId;
	private String emName;
	private String emJob;
	private String emDate;
	private String emSalary;
	private String emBonus;
	public void setEmId(String emId) {
		this.emId = emId;
	}
	public String getEmId() {
		return emId;
	}
	public void setEmName(String emName) {
		this.emName = emName;
	}
	public String getEmName() {
		return emName;
	}
	public void setEmJob(String emJob) {
		this.emJob = emJob;
	}
	public String getEmJob() {
		return emJob;
	}
	public void setEmDate(String emDate) {
		this.emDate = emDate;
	}
	public String getEmDate() {
		return emDate;
	}
	public void setEmSalary(String emSalary) {
		this.emSalary = emSalary;
	}
	public String getEmSalary() {
		return emSalary;
	}
	public void setEmBonus(String emBonus) {
		this.emBonus = emBonus;
	}
	public String getEmBonus() {
		return emBonus;
	}
}

JSP文件：

<%@ page import="demo.employee" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<%request.setCharacterEncoding("UTF-8"); %>
<title>Insert title here</title>
</head>
<body>
<%
	employee em = new employee();
	em.setEmId(request.getParameter("id"));
	em.setEmName(request.getParameter("name"));
	em.setEmJob(request.getParameter("job"));
	em.setEmDate(request.getParameter("date"));
	em.setEmSalary(request.getParameter("salary"));
	em.setEmBonus(request.getParameter("bonus"));
%>
	<h3>雇员编号：<%=em.getEmId() %></h3>
	<h3>雇员姓名：<%=em.getEmName() %></h3>
	<h3>雇员工作：<%=em.getEmJob() %></h3>
	<h3>雇佣日期：<%=em.getEmDate() %></h3>
	<h3>基本工资：<%=em.getEmSalary() %></h3>
	<h3>奖&nbsp;&nbsp;&nbsp;金：<%=em.getEmBonus() %></h3>
</body>
</html>