javaweb课后练习:编写一个雇员注册的表单,要求输入以下内容:雇员编号、雇员姓名、雇员工作、雇佣日期、基本工资和奖金。

本文主要是介绍javaweb课后练习:编写一个雇员注册的表单,要求输入以下内容:雇员编号、雇员姓名、雇员工作、雇佣日期、基本工资和奖金。,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Javaweb第二章课后习题

 

编写一个雇员注册的表单,要求输入以下内容:雇员编号、雇员姓名、雇员工作、雇佣日期、基本工资和奖金。并对表单进行JavaScript验证,验证要求如下:

1. 雇员编号:只能是数字;

2. 雇员姓名:不能为空;

3. 雇员工作:不能为空;

4. 雇佣日期:必须是日期格式,即2010-09-19;

5. 基本工资:必须是数字(小数);

6. 奖金:必须是数字(小数)。
 

实验结果: 

实验代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
span{color:red}
</style>
<script type="text/javascript">
function Check(){
var usernumber=document.getElementById("number").value;//编号
if(!/^[1-9]\d*$|^0$/.test(usernumber)){document.getElementById("unumbererror").innerHTML="<span>只能输入数字!</span>";document.getElementById("number").focus();return false;
}
/*else{document.getElementById("unumbererror").innerHTML="编号格式正确";}*/var username=document.getElementById("name").value;//姓名
if(username.length==0){document.getElementById("unameerror").innerHTML="<span>姓名不能为空!</span>";document.getElementById("name").focus();return false;}
//else{document.getElementById("unameerror").innerHTML="<span>姓名格式正确</span>";}var userjob=document.getElementById("job").value;//工作
if(userjob.length==0){document.getElementById("ujoberror").innerHTML="<span>工作不能为空!</sapn>";document.getElementById("job").focus();return false;}
//else{document.getElementById("ujoberror").innerHTML="<span>工作格式正确</sapn>";}
var userdate=document.getElementById("date").value;	//日期
if(!/^([1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|1[0-9]|2[0-9]|3[0-1]))$/.test(userdate)){document.getElementById("udateerror").innerHTML="<span>必须是日期格式YYYY-MM-DD</span>";document.getElementById("date").focus();return false;
}
//else{document.getElementById("udateerror").innerHTML="<span>日期格式正确</span>";}
var usersalary=document.getElementById("salary").value;//薪水if(!/^[1-9]d*.d*|0.d*[1-9]d*$/.test(usersalary))
{document.getElementById("usalaryerror").innerHTML="<span>必须是数字(小数)</span>";document.getElementById("salary").focus();return false;
}//else{document.getElementById("usalaryerror").innerHTML="<span>薪水格式正确</span>";}var userbonus=document.getElementById("bonus").value;//奖金
if(!/^[1-9]d*.d*|0.d*[1-9]d*$/.test(userbonus))
{document.getElementById("ubonuserror").innerHTML="<span>必须是数字(小数)</span>";document.getElementById("bonus").focus();return false;
}
/*else
{document.getElementById("ubonuserror").innerHTML="<span>奖金格式正确</span>";}*/}
</script>
</head>
<body>
<form action="" method="post" name="myform" onSubmit="return Check()">
<table>
<tr>
<td>编号:</td>
<td><input type="number" name="number" id="number"></td>
<td><span id="unumbererror"></span></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" name="name" id="name"></td>
<td><span id="unameerror""></span></td>
</tr>
<tr>
<td>工作:</td>
<td><input type="text" name="job" id="job"></td>
<td><span id="ujoberror"></span></td>
</tr>
<tr>
<td>日期:</td>
<td><input type="text" name="date" id="date"></td>
<td><span id="udateerror"></span></td>
</tr>
<tr>
<td>基本工资:</td>
<td><input type="text" name="salary" id="salary"></td>
<td><span id="usalaryerror"></span></td>
</tr>
<tr>
<td>奖金:</td>
<td><input type="number" name="bonus" id="bonus"></td>
<td><span id="ubonuserror"></span></td>
</tr>
<tr>
<td><input type="submit" value="提交"></td>
<td><span id="usubmiterror"></span></td>
</tr>
</table>
</form>
</body>
</html>

其中,被注释的是显示输入格式正确的信息,若不注释掉,显示的如下图片:

 

 

实验中,我遇到的问题是小数验证时总是提示我必须输入有效值,原因就是type的类型我写的是number,改成text就行了,至于为什么我也不太清楚,而且这里的日期格式验证我写的是很简单的,没有考虑平年、闰年,一个月是28、29、30还是31天的问题,因为正则表达式太难写了

 

 

这篇关于javaweb课后练习:编写一个雇员注册的表单,要求输入以下内容:雇员编号、雇员姓名、雇员工作、雇佣日期、基本工资和奖金。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/m0_60139936/article/details/120930924
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/203651

相关文章

Java深度学习库DJL实现Python的NumPy方式

《Java深度学习库DJL实现Python的NumPy方式》本文介绍了DJL库的背景和基本功能,包括NDArray的创建、数学运算、数据获取和设置等,同时,还展示了如何使用NDArray进行数据预处理... 目录1 NDArray 的背景介绍1.1 架构2 JavaDJL使用2.1 安装DJL2.2 基本操

最长公共子序列问题的深度分析与Java实现方式

《最长公共子序列问题的深度分析与Java实现方式》本文详细介绍了最长公共子序列(LCS)问题,包括其概念、暴力解法、动态规划解法,并提供了Java代码实现,暴力解法虽然简单,但在大数据处理中效率较低,... 目录最长公共子序列问题概述问题理解与示例分析暴力解法思路与示例代码动态规划解法DP 表的构建与意义动

Java多线程父线程向子线程传值问题及解决

《Java多线程父线程向子线程传值问题及解决》文章总结了5种解决父子之间数据传递困扰的解决方案,包括ThreadLocal+TaskDecorator、UserUtils、CustomTaskDeco... 目录1 背景2 ThreadLocal+TaskDecorator3 RequestContextH

关于Spring @Bean 相同加载顺序不同结果不同的问题记录

《关于Spring@Bean相同加载顺序不同结果不同的问题记录》本文主要探讨了在Spring5.1.3.RELEASE版本下,当有两个全注解类定义相同类型的Bean时,由于加载顺序不同,最终生成的... 目录问题说明测试输出1测试输出2@Bean注解的BeanDefiChina编程nition加入时机总结问题说明

java父子线程之间实现共享传递数据

《java父子线程之间实现共享传递数据》本文介绍了Java中父子线程间共享传递数据的几种方法,包括ThreadLocal变量、并发集合和内存队列或消息队列,并提醒注意并发安全问题... 目录通过 ThreadLocal 变量共享数据通过并发集合共享数据通过内存队列或消息队列共享数据注意并发安全问题总结在 J

Spring AI Alibaba接入大模型时的依赖问题小结

《SpringAIAlibaba接入大模型时的依赖问题小结》文章介绍了如何在pom.xml文件中配置SpringAIAlibaba依赖,并提供了一个示例pom.xml文件,同时,建议将Maven仓... 目录(一)pom.XML文件:(二)application.yml配置文件(一)pom.xml文件:首

SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤

《SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤》本文主要介绍了SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤,文中通过示例代码介绍的非常详... 目录 目标 步骤 1:确保 ProxySQL 和 mysql 主从同步已正确配置ProxySQL 的

解决JavaWeb-file.isDirectory()遇到的坑问题

《解决JavaWeb-file.isDirectory()遇到的坑问题》JavaWeb开发中,使用`file.isDirectory()`判断路径是否为文件夹时,需要特别注意:该方法只能判断已存在的文... 目录Jahttp://www.chinasem.cnvaWeb-file.isDirectory()遇

Java数字转换工具类NumberUtil的使用

《Java数字转换工具类NumberUtil的使用》NumberUtil是一个功能强大的Java工具类,用于处理数字的各种操作,包括数值运算、格式化、随机数生成和数值判断,下面就来介绍一下Number... 目录一、NumberUtil类概述二、主要功能介绍1. 数值运算2. 格式化3. 数值判断4. 随机

Java下载文件中文文件名乱码的解决方案(文件名包含很多%)

《Java下载文件中文文件名乱码的解决方案(文件名包含很多%)》Java下载文件时,文件名中文乱码问题通常是由于编码不正确导致的,使用`URLEncoder.encode(filepath,UTF-8... 目录Java下载文件中文文件名乱码问题一般情况下,大家都是这样为了解决这个问题最终解决总结Java下