編寫一個僱員登錄檔單並進行驗證
阿新 • • 發佈：2018-12-15
Javaweb第二章課後習題
編寫一個僱員註冊的表單，要求輸入以下內容：僱員編號、僱員姓名、僱員工作、僱傭日期、基本工資和獎金。並對錶單進行JavaScript驗證，驗證要求如下：
1. 僱員編號：只能是數字；
2. 僱員姓名：不能為空；
3. 僱員工作：不能為空；
4. 僱傭日期：必須是日期格式，即2018-10-13；
5. 基本工資：必須是數字（小數）；
6. 獎金：必須是數字（小數）。
思路：先寫一個html表單檔案，進行JavaScript驗證，並把表單內容提交給jsp檔案，然後建立一個class類加入無參構造，最後寫一個jsp檔案接收並顯示內容。程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <title>僱員登錄檔單</title> <script type="text/javascript"> function check(){ return checkEmp(); } function checkEmp(){ if(document.getElementById('empno').value.length==0) {alert("編號不能為空！"); document.getElementById('empno').focus(); return false;} var value = document.getElementById("empno").value; var reg=/^[1-9]\d*$|^0$/; if(reg.test(value)!=true) { alert("編號必須為數字！"); document.getElementById('empno').focus(); return false; } if(document.getElementById('empname').value.length==0) { alert("姓名不能為空！"); document.getElementById('empname').focus(); return false; } if(document.getElementById('empjob').value.length==0) { alert("工作不能為空！"); document.getElementById('empjob').focus(); return false; } if(!document.getElementById("empdate").value.match("^[0-9]{4,4}-[0-9]{2,2}-[0-9]{2,2}$")) { alert( "日期格式錯誤 xxxx-xx-xx"); document.getElementById('empdate').focus(); return false; } if(!document.getElementById("empsal").value.match("^[0-9]{1,9}.[0-9]{2,2}$")) { alert( "工資格式錯誤x...x.xx "); document.getElementById('empsal').focus(); return false; } if(!document.getElementById("empbond").value.match("^[0-9]{1,9}.[0-9]{2,2}$")) { alert( "獎金格式錯誤x...x.xx "); document.getElementById('empbond').focus(); return false; } } </script> </head> <body> <form action="get.jsp" method="post" name="emp"> 僱員編號：<input type="number" id="empno" name="empno"><br> 僱員姓名：<input type="text" id="empname" name="empname"><br> 僱員工作：<input type="text" id="empjob" name="empjob"><br> 僱傭日期：<input type="text" id="empdate" name="empdate"><br> 基本工資：<input type="number" id="empsal" name="empsal"><br> 獎 金：<input type="number" id="empbond" name="empbond"><br> <input type="submit" value="提交" onclick="check()"><input type="reset" value="重置"><br> </form> </body> </html>
package demo; public class SimpleBean { private String empno; private String empname; private String empjob; private String empdate; private String empsal; private String empbond; public String getEmpno() { return empno; } public void setEmpno(String empno) { this.empno = empno; } public String getEmpname() { return empname; } public void setEmpname(String empname) { this.empname = empname; } public String getEmpjob() { return empjob; } public void setEmpjob(String empjob) { this.empjob = empjob; } public String getEmpdate() { return empdate; } public void setEmpdate(String empdate) { this.empdate = empdate; } public String getEmpsal() { return empsal; } public void setEmpsal(String empsal) { this.empsal = empsal; } public String getEmpbond() { return empbond; } public void setEmpbond(String empbond) { this.empbond = empbond; } }
<%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%> <%@ page import="demo.*" %> <!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=GBK"> <title>獲取表單</title> </head> <% request.setCharacterEncoding("GBK"); %> <body> <% SimpleBean simple = new SimpleBean(); simple.setEmpno(request.getParameter("empno")); simple.setEmpname(request.getParameter("empname")); simple.setEmpjob(request.getParameter("empjob")); simple.setEmpdate(request.getParameter("empdate")); simple.setEmpsal(request.getParameter("empsal")); simple.setEmpbond(request.getParameter("empbond")); %> <h3>僱員編號：<%=simple.getEmpno() %></h3> <h3>僱員姓名：<%=simple.getEmpname() %></h3> <h3>僱員工作：<%=simple.getEmpjob() %></h3> <h3>僱傭日期：<%=simple.getEmpdate() %></h3> <h3>基本工資：<%=simple.getEmpsal() %></h3> <h3>獎 金：<%=simple.getEmpbond() %></h3> </html>
實驗結果如下：
