表单的确认
• 客户端确认
– 减少服务器负载
– 缩短用户等待时间
– 兼容性难
• 服务器端确认
– 统一确认
– 兼容性强
– 服务器负载重
客户端确认例子
使用JavaScript进行客户端验证
获得对JavaScript的初步印象
JSP与客户机的交互
• 从表单中获得参数
• 返回参数
• 表单的服务器端确认
var是变量类型，是动态的，给它赋什么值它就是什么类型。
js要写在< script type=“text/javascript”></ script>里面
js没有equals方法，直接用==
getElementById是获取id所对应的对象。
getElementsByName返回的是一个具有相同名字的数组，当取[0]时，为一个对象。
js里的数组相当于java里的列表
username.value.length代表着username这个对话框的value属性的长度
alert()为弹出一个窗口
οnsubmit="return validate()"为鼠标点击submit触发事件onsubmit，获取validate的返回值，如果为true提交，为false不提交。
<%@ 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>
<script type="text/javascript">
function validate(){
/* var username = document.getElementById("username1");
var password = document.getElementById("password1");
var repassword = document.getElementById("repassword1"); */
var username = document.getElementsByName("username")[0];
var password = document.getElementsByName("password")[0];
var repassword = document.getElementsByName("repassword")[0];
if(username.value.length == 0){
alert("username can't be blank!");
return false;
}
if(password.value.length < 6 || password.value.length > 10){
alert("length of password is invalid!");
return false;
}
if(repassword.value.length < 6 || repassword.value.length > 10){
alert("length of repassword is invalid!");
return false;
}
if(password.value != repassword.value){
alert("password not the same");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="ValidateServlet" method="post" >
username:<input type="text" name="username" id="username1"><br>
password:<input type="password" name="password" id="password1"><br>
re-password:<input type="password" name="repassword" id="repassword1"><br>
<input type="submit" value="submit">
</form>
</body>
</html>
结果为：
用js简单实现全选按钮
getElementsByTagName为获取标签名为。。。的对象
<%@ 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>
<script type="text/javascript">
function selectAll(){
var allMails = document.getElementsByName("allMails")[0];
var mails = document.getElementsByName("email");
if(allMails.checked){
for(var i = 0 ; i < mails.length ; i++){
mails[i].checked = true;
}
}
else{
for(var i = 0 ; i < mails.length ; i++){
mails[i].checked = false;
}
}
var nodes = document.getElementsByTagName("input");
for(var i = 0 ; i < nodes.length ; i++){
alert(nodes[i].type);
}
}
</script>
</head>
<body>
全选<input type="checkbox" onclick="selectAll()" name="allMails"><br><br><br><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>
<input type="radio"><br>
<input type="text"><br>
<input type="password"><br>
<input type="file"><br>
</body>
</html>
点点点直到全部遍历完
表单的服务器端的验证
• 在客户端不能用JSP进行确认
• 分工：数据处理在服务器端
• 实效性：客户端得到服务器确认后表明数据已经到达服务器
• 客户端兼容性好
• 缺点：加大服务器负载和用户等待时间
package learn.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ValidateServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
String repassword = request.getParameter("repassword");
List<String> list = new ArrayList<String>();
//注意这里为什么写为"".equals(username)而不写为username.equals("")
//这是因为可以有效防止username的空指针异常
if(null == username || "".equals(username)){
list.add("username can't be blank!");
}
if(password == null || password.length() < 6 || password.length() > 10){
list.add("length of password should be between 6 and 10!");
}
if(repassword == null || repassword.length() < 6 || repassword.length() > 10){
list.add("length of repassword should be between 6 and 10!");
}
if(password != null && repassword != null && !password.equals(repassword)){
list.add("password and repassword not the same");
}
if(list.isEmpty()){
request.setAttribute("username", username);
request.setAttribute("password", password);
request.getRequestDispatcher("success.jsp").forward(request, response);
}
else {
request.setAttribute("error", list);
request.getRequestDispatcher("error.jsp").forward(request, response);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(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>
username:<%= request.getAttribute("username") %>
password:<%= request.getAttribute("password") %>
</body>
</html>
<%@page import="java.util.List"%>
<%@ 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>
<h1> login failed</h1>
<% List<String> list = (List<String>)request.getAttribute("error");
for(String str : list){
out.println(str + "<br>");
}
%>
</body>
</html>
当用户进行不正当访问，例如在地址栏中直接访问servlet服务器验证就会起到作用
扫一扫
3531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
