本文介绍了如何在Servlet中获取表单请求参数，并展示了使用JavaScript进行前端表单验证的详细步骤，包括onblur、onfocus和onsubmit事件处理。提供了具体的HTML和Servlet代码示例，涉及用户名、密码、性别、爱好等字段的验证。
1、Servlet获取请求参数，步骤同CSDN博客上一篇。 ( HPK8_CPH )
备注：①编写大量代码时，在Dreamweaver中编写。
2、表单验证(战略思路)
①每个元素进行验证onblur事件；
当元素失去焦点时进行验证，如有错误给出提示
②当元素获取焦点，onfocus事件；
当元素获得焦点时，需要将错误信息清除
③提交按钮事件，onsubmit 需要验证所有表单元素
解决：A 每个元素的onfocus事件写个验证方法
验证是否为空，格式是否正确（正则表达式）
B 每个元素的onfocus事件，清除错误信息方法
只写一个方法，接收错误提示层id
C onsubmit
If(check1()==true&&check2()==true&&check3()==true”){
}
3、运行结果
4、具体代码，详见附录。（具体战役，具体分析，多看代码解释）
附录一：register.html部分
<!DOCTYPE html>
<html>
<head>
<title>register.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style>
div{color:#f00;fontsize:12px;}
</style>
<script type="text/javascript">
//清除错误信息
function clearError(eid){
//★对普通元素的操作
document.getElementById(eid).innerHTML="";
}
//显示错误信息
function showError(eid,msg){
document.getElementById(eid).innerHTML=msg;
}
//验证用户名
function checkUsername(){
//alert("asdfasd");
//获得输入值
var username=document.getElementById("username").value;
//★是否为空
if(username.length==0){
//document.getElementById("nameerror").innerHTML="用户名不能为空";
var msg="用户名不能为空!";
showError('nameerror',msg);
return false;
}
//格式是否正确(要求开头是字母，其余可以是字母数字，下划线，长度6——20位)
var pattern = /^[a-zA-Z][a-zA-Z0-9_]{5,19}$/;//★正则表达式
if(pattern.test(username)==false){
var msg="用户名格式非法";
showError('nameerror',msg);
return false;
}
return true;
}
</script>
</head>
<body>
<form name="form1" method="post" ★action="register.do">
<table width="600" border="1" cellpadding="0">
<tr>
<td width="145">用户名：</td>
<td width="289"><label for="textfield"></label>
<input type="text" name="username" id="username" ★onBlur= "checkUsername();" ★onFocus="clearError('nameerror');"></td>
<td width="150"><div id="nameerror"></div></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password" id="password"></td>
<td> </td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="password1" id="password1"></td>
<td> </td>
</tr>
<tr>
<td>性别：</td>
//男女name应设置的一致
<td><input type="radio" name="sex" id="radio" value="男">
<label for="radio"></label>
男
<input type="radio" name="sex" id="radio2" value="女">
<label for="radio2"></label>
女</td>
<td> </td>
</tr>
<tr>
<td>个人爱好：</td>
<td><input type="checkbox" name="hobby" id="checkbox">
<label for="checkbox">文学
<input type="checkbox" name="hobby" id="checkbox2">
</label>
影视
<input type="checkbox" name="hobby" id="checkbox3">
<label for="checkbox3"></label>
音乐
<input type="checkbox" name="hobby" id="checkbox4">
<label for="checkbox4"></label>
体育</td>
<td> </td>
</tr>
<tr>
<td>出生日期：</td>
<td><label for="select"></label>
<select name="year" id="year">
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
</select>
年</td>
<td> </td>
</tr>
<tr>
<td>所在城市：</td>
<td><label for="select2"></label>
<select name="city" id="city">
<option value="烟台">烟台</option>
<option value="济南">济南</option>
<option value="青岛">青岛</option>
<option value="潍坊">潍坊</option>
<option value="济宁">济宁</option>
</select></td>
<td> </td>
</tr>
<tr>
<td>电子邮件：</td>
<td><input type="text" name="email" id="email"></td>
<td> </td>
</tr>
<tr>
<td>QQ：</td>
<td><input type="text" name="qq" id="qq"></td>
<td> </td>
</tr>
<tr>
<td colspan="3" align="center"><input type="submit" name="submit" id="submit" value="提交">
<input type="reset" name="reset" id="reset" value="重置"></td>
</tr>
</table>
</form>
<br>
</body>
</html>
附录二：RegisterServlet.java部分
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class RegisterServlet extends HttpServlet {
/**
* Constructor of the object.
*/
public RegisterServlet() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置编码格式（记住）
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
//获取表单提交数据
String username= request.getParameter("username");
String password =request.getParameter("password");
String password1 =request.getParameter("password1");
//★单选按钮获取的是被选中的值
String sex =request.getParameter("sex");
//★★复选按钮是数组的形式
String[] hobbys =request.getParameterValues("hobby");
//下拉列表通过<select name="">获取选项的value值
String year =request.getParameter("year");
String city =request.getParameter("city");
String email =request.getParameter("email");
String qq =request.getParameter("qq");
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
out.println("<HTML>");
out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>");
out.println(" <BODY>");
out.println("用户名："+username+"<br>");
out.println("密码："+password+"<br>");
out.println("确认密码："+password1+"<br>");
out.println("性别："+sex+"<br>");
//★★复选框需要以数组的形式表示出，此处需要挨个判断
String hobs="";
if(hobbys !=null){
for(String s :hobbys){
hobs += s;
}
}
out.println("出生日期："+year+"<br>");
out.println("所在城市："+city+"<br>");
out.println("email："+email+"<br>");
out.println("qq："+qq+"<br>");
out.println(" </BODY>");
out.println("</HTML>");
out.flush();
out.close();
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
}
3031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
