目的
- 强化对脚本语言javascript的理解与运用
- 能基本达到较为熟练的使用javascript进行页面的简单验证
- 熟悉服务器端验证的方法
- 比较客户端验证与服务器端验证的区别
要求
• 要求(客户端验证):
• 用户名与密码输入不能为空
• 用户名与密码的长度均须在4—10之间
• 性别必须选择(页面初始化时没有选择其中任何一个选项)
• 兴趣的选择数量在1—3之间(最少选择一个,最多选择三个)
• 说明为必填项
• 用户填写不符合要求的需要弹出警告对话框
• 以上要求用javascript验证
• 服务器端验证
• 要求与前相同
• 必须采用Servlet进行验证（简单的MVC）
• 验证用户的所有输入,完全符合要求的转到显示用户填写信息结果页面
• 如果存在不符合要求的地方则Servlet转到一个jsp页面,页面内容为用户信息中不符合要求的信息
• 对于服务器端验证不做具体要求,只要实现功能即可,无论采用什么方法都可以,但是必须用Servlet来实现，不可以使用jsp
用JavaScript对复杂表单进行客户端验证
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>form</title>
<script type="text/javascript">
function validate(){
var username = document.getElementsByName("username")[0];
var password = document.getElementsByName("password")[0];
var gender = document.getElementsByName("gender");
var interest = document.getElementsByName("interest");
var comment = document.getElementsByName("comment")[0];
if(username.value.length < 1){
alert("用户名不能为空！");
return false;
}
if(password.value.length < 1){
alert("密码不能为空！");
return false;
}
if(username.value.length < 4 || username.value.length > 10){
alert("用户名长度应该介于4到10之间");
return false;
}
if(password.value.length < 4 || password.value.length > 10){
alert("密码长度应该介于4到10之间");
return false;
}
if(!gender[0].checked && !gender[1].checked){
alert("性别必须要选择");
return false;
}
var n = 0;
for(var i = 0; i < interest.length; i++){
if(interest[i].checked){
n++;
}
}
if(n < 1){
alert("兴趣至少选择一个！");
return false;
}
if(n > 3){
alert("兴趣最多选择三个！");
return false;
}
if(comment.value.length < 1){
alert("说明必须要填写！");
return false;
}
}
</script>
</head>
<body>
<form action="#" onsubmit="return validate();">
用户名：<input type="text" name="username">
<br>
密码：<input type="password" name="password">
<br>
性别：男<input type="radio" name="gender" value="男">
女<input type="radio" name="gender" value="女">
<br>
兴趣：足球：<input type="checkbox" name="interest" value="足球">
篮球：<input type="checkbox" name="interest" value="篮球">
排球：<input type="checkbox" name="interest" value="排球">
羽毛球：<input type="checkbox" name="interest" value="羽毛球">
<br>
地址：
<select>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="天津">天津</option>
</select>
<br>
说明：
<br>
<textarea name="comment" rows="10" cols="40"></textarea>
<br>
<input type="submit" value="确认">
<input type="reset" value="重置">
</form>
</body>
</html>
用Servlet对复杂表单进行服务器端验证
package learn.servlet;
import java.util.*;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ProcessServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
process(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
process(request, response);
}
protected void process(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
String gender = request.getParameter("gender");
String[] interest = request.getParameterValues("interest");
String address = request.getParameter("address");
String comment = request.getParameter("comment");
//存放错误信息
List<String> list = new ArrayList<String>();
//验证用户名
if(null == username || "".equals(username)){
list.add("用户名不能为空！");
}
else if (username.length() < 4) {
list.add("用户名过短!");
}
else if (username.length() > 10) {
list.add("用户名过长！");
}
//验证密码
if(null == password || "".equals(password)){
list.add("密码不能为空！");
}
else if (password.length() < 4) {
list.add("密码过短!");
}
else if (password.length() > 10) {
list.add("密码过长！");
}
//验证性别
if(null == gender){
list.add("性别没有选择");
}
//验证兴趣
if(null == interest){
list.add("兴趣至少选择一个");
}
else if (interest.length > 3) {
list.add("兴趣最多选择三个！");
}
//验证说明
if(null == comment || "".equals(comment)){
list.add("说明没有填写");
}
if(list.isEmpty()){
request.setAttribute("username", username);
request.setAttribute("password", password);
request.setAttribute("gender", gender);
request.setAttribute("interest", interest);
request.setAttribute("address", address);
request.setAttribute("comment", comment);
request.getRequestDispatcher("loginSuccess.jsp").forward(request, response);
}
else {
request.setAttribute("error", list);
request.getRequestDispatcher("loginFailure.jsp").forward(request, response);
}
}
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Insert title here</title>
</head>
<body>
用户名：<%= request.getParameter("username") %>
<br>
密码：<%= request.getParameter("password") %>
<br>
性别：<%= request.getParameter("gender") %>
<br>
兴趣：<% String[] interest = (String[])request.getAttribute("interest");
for(String str : interest){
out.println(str + " ");
}
%>
<br>
地址：<%= request.getParameter("address") %>
<br>
说明：<%= request.getParameter("comment") %>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.*" %>
<!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=UTF-8">
<title>Insert title here</title>
</head>
<body>
错误信息如下：<br><br><br>
<% List<String> list = (List<String>)request.getAttribute("error");%>
<ul>
<%for(String str : list){%>
<li><font color="#ff0000"><%= str %></font></li>
<%}%>
</ul>
</body>
</html>
结果是：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
