8、使用JavaScript与Servlet实现客户端与服务器端验证

最新推荐文章于 2024-01-04 08:47:56 发布

kaoa000

最新推荐文章于 2024-01-04 08:47:56 发布

阅读量1.3k

点赞数

分类专栏： JAVA WEB

本文链接：https://blog.csdn.net/kaoa000/article/details/8749600

版权

JAVA WEB 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

表单的验证分为：

客户端确认

- 减少服务器负载；缩短用户等待时间；兼容性难

服务器端确认

- 统一确认；兼容性强；服务器负载重

1、javaScript初步

JSP与客户机的交互：
- 从表单中获得参数；返回参数；表单的服务器端确认

JavaScript是一种脚本语言，主要用在客户端，位置放在<head></head>标签中；html的每个标签都有一个id属性，这个属性是给客户端使用的

JavaScript语句结尾的分号可有可无，通常都写上，javascript是一种基于事件的语言，通过事件来触发，对于表单，有onsubmit事件，即提交表单时触发事件，对于input标签，可能返回使用getElementById（）返回HTMLInputElement，

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'mylogin.jsp' starting page</title>
	<script type="text/javascript">
		function validate()
		{
			//获取元素的第一种方式，使用document.getElementById，返回单个元素
			//var username = document.getElementById("username1");
			//var password = document.getElementById("password1");
			//var repassword = document.getElementById("repassword1");
			
			//获取元素的第二种方式，使用document.getElementsByName，返回的是元素的一个列表
			var username = document.getElementsByName("username")[0];
			var password = document.getElementsByName("password")[0];
			var repassword = document.getElementsByName("repassword")[0];
			
			if(username.value == "")
			{
				alert("username can't be blank");
				return false;
			}
			if(password.value.length < 6 || password.value.length > 10)
			{
				alert("password length is invalid");
				return false;
			}
			if(repassword.value.length < 6 || repassword.value.length > 10)
			{
				alert("repassword length is invalid");
				return false;
			}
			if(password.value != repassword.value)
			{
				alert("password not the same");
				return false;
			}
			return true;
		}
	</script>

  </head>
  
  <body>
    <form οnsubmit="return validate()">
    username:<input type="text" name="username" id="username1"><br>
    password:<input type="password" name="password" id="password1"><br>
    repassword:<input type="password" name="repassword" id=repassword1"><br>
    <input type="submit" value="submit" ><br>
    </form>
  </body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'quanxuan.jsp' starting page</title>

	<script type="text/javascript">
		function selectAll()
		{
			var allmail = document.getElementsByName("allmail")[0];
			var all = document.getElementsByName("mail");
			
			if(allmail.checked)
			{
				for(var i = 0; i< all.length;i++)
				{
					all[i].checked = true;
				}	
			}
			else
			{
				for(var i = 0; i< all.length;i++)
				all[i].checked = false;
			}

			//使用标签名获取元素列表
			var nodes = document.getElementsByTagName("input");
			for(var i = 0;i<nodes.length;i++)
			{
				alert(nodes[i].type);
			}
		}
	</script>
  </head>
  
  <body>
   全选：<input οnclick="selectAll()" type="checkbox" name="allmail">
   <br/>
   <input type="checkbox" name="mail"><br>
   <input type="checkbox" name="mail"><br>
   <input type="checkbox" name="mail"><br>
   <input type="checkbox" name="mail"><br>
   <input type="checkbox" name="mail"><br>
   <input type="checkbox" name="mail"><br>
   <input type="checkbox" name="mail"><br>
   <input type="checkbox" name="mail"><br>
   <input type="radio"/>
   <input type="text"/>
   <input type="password"/>
   <input type="file"/>
   </body>
   
</html>

2、服务器端验证：

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
{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException
	{
		String username = req.getParameter("username");
		String password = req.getParameter("password");
		String repassword = req.getParameter("repassword");
		
		List<String> list = new ArrayList<String>();
		if("".equals(username))
		{
			list.add("username can't ben 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 not same");
		}
		
		if(list.isEmpty())
		{
			req.setAttribute("username", username);
			req.setAttribute("password", password);
			
			req.getRequestDispatcher("success.jsp").forward(req, resp);
		}
		else
		{
			req.setAttribute("error", list);
			req.getRequestDispatcher("error.jsp").forward(req, resp);
		}
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException
	{
		this.doGet(req, resp);
	}
}

3、表单的服务器端确认

- 在客户端不能用JSP进行确认；分工：数据处理在服务器端；时效性：客户端得到服务器确认后表明数据已经到达服务器；客户端兼容性好；缺点：加大服务器负载和客户等待时间。

4、JavaBean

- JavaBean是一种可重复使用、且跨平台的软件组织。JavaBean可分为两种：一种是由用户界面（UI，User Interface）的JavaBean；还有一种是没有用户界面，主要负责处理事务（如数据运算，操纵数据库）的JavaBean。JSP通常访问的是后一种JavaBean。

- JSP与JavaBean搭配使用的优点：
使得HTML与Java程序分离，这样便于维护代码。如果把所有的程序代码都写在JSP网页中，会使得代码繁杂，难以维护；可以降低开发JSP网页人员对Java编程能力的要求；JSP侧重于生成动态网页，事务处理由JavaBean来完成，这样可以充分利用JavaBean组件的可重用性特点，提高开发网站的效率。

-JavaBean的特征：一个标准的JavaBean有以下几个特性：
-JavaBean是一个公共的（public）类；JavaBean有一个不带参数的构造方法；JavaBean通过setxxx方法设置属性，通过getxxx方法获取属性。（为了反射）

- 一个典型的JavaBean：

public class CounterBean
{
    private int count = 0; 
    public CounterBean(){}
    public int getCount(){
        return count;
    }
    public void setCount(int count){
        this.count = count;
    }
}

5、MVC设计模式（Model——模型 View——视图 Control——控制）

view主要是jsp，controler主要是servlet，model是处理类

6、JSP访问JavaBean的语法：

    1）导入JavaBean类
    2）声明JavaBean对象
    3）访问JavaBean属性

通过<%@ page import= %>指令导入JavaBean类，如<%@ page import="mypack.CounterBean" %>
声明JavaBean对象：使用<jsp:useBean>标签来声明JavaBean对象，如：<jsp:useBean id="myBean" class="mypack.CounterBean" scope="session" />
访问JavaBean属性：JSP提供了访问JavaBean属性的标签，如果要将JavaBean的某个属性输出到页面上，可以使用<jsp:getProperty>标签，例如：
<jsp:getProperty name="myBean" property="count" />
如果要给JavaBean的某个属性赋值，可以使用<jsp:setProperty>标签，例如：
<jsp:setProperty name="myBean" property="count" value="0" />

一个JSP使用JavaBean的例子：

JavaBean：

public class Person
{
	private String name = "zhangsan";
	private int age = 10;
	private String address = "shanghai";
	public String getName()
	{
		return name;
	}
	public void setName(String name)
	{
		this.name = name;
	}
	public int getAge()
	{
		return age;
	}
	public void setAge(int age)
	{
		this.age = age;
	}
	public String getAddress()
	{
		return address;
	}
	public void setAddress(String address)
	{
		this.address = address;
	}
	
}

jsp网页：

<%@ page language="java" import="java.util.*,com.cdtax.bean.Person" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'javabean.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
    <jsp:useBean id="person" class="com.cdtax.bean.Person"></jsp:useBean>
    
    <jsp:getProperty property="name" name="person"/><br>
    <jsp:getProperty property="age" name="person"/><br/>
    <jsp:getProperty property="address" name="person"/>
  </body>
</html>

jsp生成的java类源代码，三个jsp：getProperty源代码：

 out.write(org.apache.jasper.runtime.JspRuntimeLibrary.toString((((com.cdtax.bean.Person)_jspx_page_context.findAttribute("person")).getName())));
      out.write("<br>\r\n");
      out.write("    ");
      out.write(org.apache.jasper.runtime.JspRuntimeLibrary.toString((((com.cdtax.bean.Person)_jspx_page_context.findAttribute("person")).getAge())));
      out.write("<br/>\r\n");
      out.write("    ");
      out.write(org.apache.jasper.runtime.JspRuntimeLibrary.toString((((com.cdtax.bean.Person)_jspx_page_context.findAttribute("person")).getAddress())));

使用的就是JavaBean的get方法，本质上就是<%= person.getName() %>

<jsp:useBean id="person" class="com.cdtax.bean.Person">实际上就是<% Person person = new Person();%>,使用<jsp:useBean>只是页面上没有java脚本，显得比较整洁，符合页面的编写方式。id的值就是引用变量person

7、JavaBean属性以及用法

- id="beanInstanceName"，在所定义的范围中确认Bean的变量，使之能在后面的程序中使用此变量名来分辨不同的Bean，这个变量名对大小写敏感，必须符合所使用的脚本语言的规定，这个规定在Java Language规范中已经写明。如果Bean已经在别的"<jsp:useBean>"标签中创建，则当使用这个已经创建过的Bean时，id的值必须与原来的那个id值一致；否则则意味着创建了同一个类的两个不同的对象。

- 属性赋值<jsp:setProperty>它的property=“propertyName” value=“{String | <%= expression%>}"，使用指定的值来设置Bean属性，这个值可以是字符串，也可以是表达式。如果是字符串，那么它就会被转换成Bean属性的类型。如果是一个表达式，那么它的类型就必须和将要设定的属性值的类型一致，不能在同一个”<jsp:setProperty>“中同时使用param和value参数。

- property = "propertyName" [param = "parameterName"]，用一个参数值来指定Bean中的一个属性值，一般情况下是从request对象中获取的，其中property指定Bean的属性名，param指定request中的参数名。param的实际代码使用是request.getparameter(“xxx”)；使用param可以实现动态赋值

<jsp:setProperty property="age" name="person" param="helloworld"/>
     <jsp:getProperty property="age" name="person"/>

8、JavaBean的范围

scope属性决定了JavaBean对象存在的范围。scope可选值包括：page（默认）、request、session、application

- JavaBean在page范围内：客户每次请求访问JSP页面时，都会创建一个JavaBean对象。JavaBean对象的有效范围是客户请求访问的当前JSP网页。JavaBean对象在以下两种情况下都会结束生命期：1、客户请求访问的当前JSP页面通过<forward>标记将请求转发到另一个文件；2、客户请求访问的当前JSP页面执行完毕并向客户端发回响应。

-JavaBean在request范围内：客户每次请求访问JSP页面时，都会创建新的JavaBean对象。JavaBean对象的有效范围为：1、客户请求访问的当前JSP网页；2、和当前JSP页面共享同一个客户请求的网页，即当前JSP网页中<%@ include%>指令以及<forward>标记包含的其他JSP文件；3、当所有共享同一个客户请求的JSP页面执行完毕并向客户端发回响应时，JavaBean对象结束生命周期。
JavaBean对象作为属性保存在HttpRequest对象中，属性名为JavaBean的id，属性值为JavaBean对象，因此也可以通过HttpRequest.getAttribute（）方法huodeJavaBean对象，例如：CounterBean obj = (CounterBean)request.getAttribute("myBean");

- JavaBean在session范围内：JavaBean对象被创建后，它存在于整个session的生存周期内，同一个session中的JSP文件共享这个JavaBean对象。
JavaBean对象作为属性保存在HttpSession对象中，属性名为JavaBean的id，属性值为JavaBean对象。除了可以通过JavaBean的id直接引用JavaBean对象外，也可以通过HttpSession.getAttribute（）方法取得JavaBean对象，例如：CounterBean obj = (CounterBean)session.getAttribute("myBean");

- JavaBean在application范围内:JavaBean对象作为属性保存在application对象中，属性名为JavaBean的id，属性值为JavaBean对象。除了可以通过JavaBean的id直接引用JavaBean对象外，也可以通过application.getAttribute（）方法取得JavaBean对象，例如：CounterBean obj = (CounterBean)application.getAttribute("myBean");

9、jsp生成的源代码分析：

当使用<jsp:useBean id="person" class="com.cdtax.bean.Person" scope="session"></jsp:useBean>时，对应的java程序代码为：

 com.cdtax.bean.Person person = null;
      synchronized (session) {
        person = (com.cdtax.bean.Person) _jspx_page_context.getAttribute("person", PageContext.SESSION_SCOPE);
        if (person == null){
          person = new com.cdtax.bean.Person();
          _jspx_page_context.setAttribute("person", person, PageContext.SESSION_SCOPE);
        }
      }

生成代码表明，id所代表的的对象引用person，是从session中取出的，使用getAttribute方法，如果是第一次，则session没有，返回空null，那么就新生成一个，然后使用setAttribute将对象设置入session中。

10、一个容易误解而又能特别说明scope问题的例子：

<jsp:useBean id="date" class="java.util.Date" scope="session"/>
  	 <%= date.toLocaleString() %>

scope如果是page或request，每次刷新页面，时间都会变，如果变成session或application，时间不变

kaoa000

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
8、使用JavaScript与Servlet实现客户端与服务器端验证

表单的验证分为：客户端确认 - 减少服务器负载；缩短用户等待时间；兼容性难服务器端确认 - 统一确认；兼容性强；服务器负载重1、javaScript初步JSP与客户机的交互： - 从表单中获得参数；返回参数；表单的服务器端确认JavaScript是一种脚本语言，主要用在客户端，位置放在标签中；html的每个标签都有一个id属性，这个属性是给
复制链接

扫一扫

专栏目录