表单处理
1. 编写表单页面regUser.jsp
2. 表单提交到页面UserInfo.jsp，显示注册信息。
3. 要求页面提交时使用javascript脚本对表单元素进行检查，如必填字段、邮件、电话的格式检查以及字段长度的检查等。注意中文的处理。
regUser.jsp表单页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>新用户注册</title><style>.required { /*“必填”的颜色*/color: red;}.main{width: 400px;height: 600px;margin: 0 auto 0 auto; /*居中*/background-color: white;display: flex;}</style>
</head>
<body>
<h1 style="color: deeppink; text-align: center;">新用户注册</h1>
<%--method="post" 用于确保表单数据的传输安全、可靠，并允许传输大量数据。post请求--%>
<form action="UserInfo.jsp" method="post" id="myform"><table align="center" ><tr><td style="padding-right: 70px;">用户名：</td><td><input type="text" id="username" name="username" required></td><td class="required">*必填</td></tr><tr><td>用户密码：</td><td><input type="password" id="password" name="password" required></td><td class="required">*必填</td></tr><tr><td>确认密码：</td><td><input type="password" id="confirm_password" name="confirm_password" required></td><td class="required">*必填</td></tr><tr><td>真实姓名：</td><td><input type="text" id="realname" name="realname" required></td><td class="required">*必填</td></tr><tr><td>性别：</td><td><input type="radio" id="male" name="gender" value="男" checked><label for="male">男</label><input type="radio" id="female" name="gender" value="女"><label for="female">女</label><br></td></tr><tr><td>出生日期：</td><td><!-- 设置输入框宽度 --><input id="year" name="year" style="width: 40px">年<select id="month" name="month"></select>月<input id="day" name="day" style="width: 40px">日</td></tr></table><table align="center" style="padding-left: 60px;"><tr><td style="padding-right: 54px;">电子邮件：</td><td><input type="email" id="email" name="email" style="width: 280px;"></td></tr><tr><td>联系电话：</td><td><input type="tel" id="phone" name="phone" style="width: 280px;"></td></tr><tr><td>联系地址：</td><td><textarea id="address" name="address" style="width: 260px; height: 100px;"></textarea></td></tr><tr><td> <input type="submit" value="提交" style="margin-left: 50px;"> </td><td> <input type="submit" value="重置" style="margin-left: 100px;"> </td></tr></table></form><script>function generateMonths() {var select = document.getElementById("month");for (var i = 1; i <= 12; i++) {var option = document.createElement("option");option.value = i;option.text = i;select.appendChild(option);}}window.onload = function() {generateMonths();document.getElementById("myform").onsubmit = function(){//this.name.value this 指向的是 document.getElementById("myform")var username = this.username.value;var password = this.password.value;var confirm_password = this.confirm_password.value;var email = this.email.value;var phone = this.phone.value;var error = "";//验证用户名 不用判断是否为空，输出的时候就会提示必填//以字母开始，无论大小都可以；可以是字母数、字下、划线,可以包含5到15个字符var judge = /^[A-Za-z_][A-Za-z0-9_]{5,15}$/;if(!judge.test(username)){error += "·用户名必须以字母开头\n";}if(username.length < 5 || username.length > 15){error += "·用户名为5到15个字符\n";}//验证两个密码是否一样if(password != confirm_password){error += "·密码必须一致\n";}//验证邮箱// 验证电子邮件地址格式var judge2 = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;if(!judge2.test(email) ){error += "·邮箱格式不正确\n";}//验证电话号码if(phone.length > 11 || phone.length < 11){error += "·手机号错误\n";}if(error == ""){alert("提交成功！");return true;}else{alert(error);return false;}}};
</script>
</body>
</html>UserInfo.jsp显示注册信息
<%--Created by IntelliJ IDEA.User: a1830Date: 2024/10/12Time: 19:46To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>注册信息</title>
</head>
<body>
<h1>用户信息</h1>
<table><tr><td>用户名：</td><td><%= request.getParameter("username") %></td></tr><tr><td>密码：</td><td><%= request.getParameter("password") %></td></tr><tr><td>真实姓名：</td><td><%= request.getParameter("realname") %></td></tr><tr><td>性别：</td><td><%= request.getParameter("gender") %></td></tr><tr><td>出生日期：</td><td><%= request.getParameter("year")+"年"+request.getParameter("month")+"月"+request.getParameter("day")+"日" %></td></tr><tr><td>邮箱：</td><td><%= request.getParameter("email") %></td></tr><tr><td>电话：</td><td><%= request.getParameter("phone") %></td></tr><tr><td>地址：</td><td><%= request.getParameter("address") %></td></tr></table>
</body>
</html>【运行结果】
4. 实验心得。
光页面就做了一个小时。错误判断一开始用数组来存字符串，但是弹出警告框的时候有逗号，后来换成字符串了，使用+=添加到末尾，每段字符串后面都有\n。
体验了onsubmit函数，还有奇奇怪怪的正则表达式
request.getParameter()既可以在链接中读取，也可以处理表单提交
