实验内容：
1、编写一个雇员注册的表单，要求输入以下内容：雇员编号、雇员姓名、雇员工作、雇佣 日期、基本工资和奖金。(40 分)
2、对上面的表单进行 JavaScript 验证，验证要求如下：
(1) 雇员编号：只能是数字（10 分）
(2) 雇员姓名：不能为空（10 分）
(3) 雇员工作：不能为空（10 分）
(4) 雇佣日期：必须是日期格式，即 2012-02-02（10 分）
(5) 基本工资：必须是数字（小数）（10 分）
(6) 奖金：必须是数字（小数）（10 分）
展示：
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>雇员注册</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#biaodan{
width: 700px;
height:500px;
border:2px solid #C0C0C0;
background-color: white;
opacity:0.9;
position: absolute;
top: 50px;
left: 100px;
}
form{width: 700px;
position: absolute;
left: 50px;
}
span{
font-size: 3px;
color: red; }
/*用透明度实现鼠标经过时提交按钮变亮*/
#tijiao{
width: 90px;
height: 30px;
position: absolute;
left: 180px;
bottom: 100px;
opacity: 0.8;
}
#tijiao:hover{
opacity:1;
}
</style>
<!-- script -->
<script type="text/javascript">
// 如果全部输入正确弹出结果 输入错误则输出提示
function sub() {
if(fid()!=true||fname()!=true||fjob()!=true||fday()!=true||fwage()!=true||fbonus()!=true)
//加上判断语句,完结撒花,注意email可以为空,所以只要!=false就对
{
alert("您的输入有误,请重新输入后提交!");
}
}
// 验证编号
function fid(){
let reg=/^[0-9]*$/;//纯数字
let xh=document.getElementById("id").value;
if (!reg.test(xh)) {
document.getElementById("aid").innerHTML="雇员编号格式错误,应为纯数字"
return false;
}
if (xh==="") {
document.getElementById("aid").innerHTML="雇员编号不能为空"
return false;
}
else
{
document.getElementById("aid").innerHTML="√"
return true;
}
}
//验证姓名不为空
function fname(){
let yx=document.getElementById("name").value;
if (yx==="") {
document.getElementById("aname").innerHTML="姓名不能为空"
return false;
}
else{
document.getElementById("aname").innerHTML="√";
return true;
}
}
//验证工作不为空
function fjob(){
let yx=document.getElementById("job").value;
if (yx==="") {
document.getElementById("ajob").innerHTML="工作不能为空"
return false;
}
else{
document.getElementById("ajob").innerHTML="√";
return true;
}
}
//验证日期
function fday(){
let reg=/([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))/;//纯数字
let d=document.getElementById("day").value;
if (!reg.test(d)||day==="") {
document.getElementById("aday").innerHTML="日期格式错误"
return false;
}
if (d==="") {
document.getElementById("aid").innerHTML="雇员编号不能为空"
return false;
}
else{
document.getElementById("aday").innerHTML="√";
return true;
}
}
// 验证工资
function fwage(){
let reg=/^(0\.?\d{0,2}|[1-9]\d*\.?\d{0,2})$/;//正数 最多两位小数
let xh=document.getElementById("wage").value;
if (!reg.test(xh)) {
document.getElementById("awage").innerHTML="格式错误,应为最多包含两位小数的非负数"
return false;
}
else
{
document.getElementById("awage").innerHTML="√"
return true;
}
}
// 验证奖金
function fbonus(){
let reg=/^(0\.?\d{0,2}|[1-9]\d*\.?\d{0,2})$/;//正数 最多两位小数
let b=document.getElementById("bonus").value;
if (!reg.test(b)) {
document.getElementById("abonus").innerHTML="格式错误,应为最多包含两位小数的非负数"
return false;
}
else
{
document.getElementById("abonus").innerHTML="√"
return true;
}
}
</script>
</head>
<body>
<div id="biaodan">
<br>
<br>
<p align="center" style="font-size: 30px;">雇员注册表单</p>
<br>
<br>
<form id="baoming">
<label for="id">编号 <!-- 标注 for=id -->
</label>
           
<input type="text" onblur="fid()" size="30%" id="id" name="id" placeholder="请输入雇员编号" required="required">
<span id="aid"></span>
<br>
<br>
<label for="name">姓名 <!-- 标注 for=id -->
</label>
           
<input type="text" onblur="fname()" size="30%" id="name" name="name" placeholder="请填写真实姓名" required="required">
<span id="aname"></span>
<br>
<br>
<label for="job">工作 <!-- 标注 for=id -->
</label>
           
<input type="text" size="30%" onblur="fjob()" id="job" name="job" required="required">
<span id="ajob"></span>
<br>
<br>
<label for="day">日期 <!-- 标注 for=id -->
</label>
           
<input type="date" size="30%" onblur="fday()" id="day" name="day" placeholder="xxxx-xx-xx" required="required">
<span id="aday"></span>
<br>
<br>
<label for="wage">基本工资 <!-- 标注 for=id -->
</label>
    
<input type="text" size="30%" onblur="fwage()" id="wage" name="wage" required="required" value="0">
<span id="awage"></span>
<br>
<br>
<label for="bonus">奖金 <!-- 标注 for=id -->
</label>
           
<input type="text" size="30%" onblur="fbonus()" id="bonus" name="bonus" required="required" value="0">
<span id="abonus"></span>
</form>
<div id="tijiao" onclick="sub()"><input type="image" src="tijiao.png" alt="tijiao" style="height: 30px;width: 90px;">
</div>
<br>
<br>
</div>
</body>
</html>