代码目录
以下为index.html文件
<html>
<head>
<meta charset="UTF-8" />
<title>表单注册与验证</title>
<script type="text/javascript">
function validate(that) {
//清空所有错误提示信息
var spans = document.getElementsByTagName("span");
for (var i = 0; i < spans.length; i++) {
spans[i].textContent = "";
}
//判断所有input不为空
var inputs = document.getElementsByTagName("input");
var flag = false;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "text") {
if (inputs[i].value == "") {
document.getElementsByTagName("span")[i].textContent = "填写信息不能为空";
return false;
}
}
}
//验证雇员编号为数字
var reg = new RegExp("^[0-9]*$");
var obj = document.getElementById("empno");
if (!reg.test(obj.value)) {
document.getElementById("error_empno").innerHTML = "雇员编号应该为数字";
return false;
}
//验证雇员日期为日期格式
if (!document.getElementById("empdate").value
.match("^[0-9]{4,4}-[0-9]{2,2}-[0-9]{2,2}$")) {
document.getElementById("error_empdate").innerHTML = "雇佣日期错误";
return false;
}
//验证基本工资为小数
var x = String(document.getElementById('empsal').value).indexOf(".");
if (x <= 0) {
document.getElementById('error_empsal').innerHTML = "基本工资应该为小数";
return false;
}
//验证奖金为小数
var x = String(document.getElementById("empbonus").value).indexOf(".");
if (x <= 0) {
document.getElementById("error_empbonus").innerHTML = "奖金应该为小数";
return false;
}
return true;
}
</script>
</head>
<body>
<form action="get.jsp" name="vali" onsubmit="return validate(this);">
雇员编号 <input type="text" id="empno" name="empno"> <span id="error_empno" style="color: red"></span><br>
雇员姓名 <input type="text" id="empname" name="empname"> <span id="error_empname" style="color: red"></span><br>
雇员工作 <input type="text" id="empjob" name="empjob"> <span id="error_empjob" style="color: red"></span><br>
雇佣日期 <input type="text" id="empdate" name="empdate"> <span id="error_empdate" style="color: red"></span><br>
基本工资 <input type="text" id="empsal" name="empsal"> <span id="error_empsal" style="color: red"></span><br>
雇员奖金 <input type="text" id="empbonus" name="empbonus"> <span id="error_empbonus" style="color: red"></span><br>
<input type="submit" value="注册">
</form>
</body>
</html>
以下为get.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
雇员编号：<%=request.getParameter("empno") %><br/>
雇员姓名：<%=request.getParameter("empname") %><br/>
雇员工作：<%=request.getParameter("empjob") %><br/>
雇佣日期：<%=request.getParameter("empdate") %><br/>
基本工资：<%=request.getParameter("empsal") %><br/>
奖金：<%=request.getParameter("empbonus") %><br/>
</body>
</html>
原创文章，作者：witersen，如若转载，请注明出处：https://www.witersen.com
微信扫一扫