表单的验证:客户端验证和服务器端验证
2013-06-23 15:59
288 查看
表单的验证:客户端验证和服务器端验证
表单的确认
客户端确认:减少服务器负载
缩短用户等待时间
兼容性难
服务器端确认:
统一确认
兼容性强
服务器负载重
客户端验证例子
首先建立一个表单,在其提交时用JavaScript方法进行验证,若该方法返回true,则进行表单的提交,若返回false,则表单不提交。<!-- 表单提交时执行JavaScript方法validate(),如果该方法返回false,那么表单是不会提交的 --> <form onsubmit="return validate()" action="servlet/ValidateServlet"> 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>
其中用于验证的JavaScript方法如下:
<script type="text/javascript"> function validate() { //第一种方式:通过ID获取元素 // 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) { //判断语句也可以写: username.value.length == 0 alert("username can't be blank!"); return false; } //密码和重复密码内容一样,长度在6到10之间 //先验证密码长度 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 != repassword) { alert("password and repassword don't match!"); return false; } //通过重重考验后返回true,进行表单提交 return true; } </script>
在验证有误的时候,弹出对话框提示,并且返回false,不提交表单。
完整的login.jsp如下(在客户端验证的时候可以先不管转向的Servlet):
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript"> function validate() { //第一种方式:通过ID获取元素 // 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) { //判断语句也可以写: username.value.length == 0 alert("username can't be blank!"); return false; } //密码和重复密码内容一样,长度在6到10之间 //先验证密码长度 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 != repassword) { alert("password and repassword don't match!"); return false; } //通过重重考验后返回true,进行表单提交 return true; } </script>
</head>
<body>
<!-- 表单提交时执行JavaScript方法validate(),如果该方法返回false,那么表单是不会提交的 -->
<form onsubmit="return validate()" action="servlet/ValidateServlet">
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>
login.jsp
但是客户端的验证是不可靠的,用户可以查看源代码,找到表单action的Servlet,然后转向这个地址,将参数用?连接在地址之后,这时候参数是没有经过客户端校验的。
服务器端验证例子
从表单中获得参数:JSP通过request内置对象获取表单信息,用不同的方法获取不同种类的信息。服务器端验证程序,先将客户端验证部分去掉,即去掉 表单中的:onsubmit="return validate()"
那么用户在表单中提交的数据将直接传到服务器端,服务器端Servlet对其进行验证:
方式如下:有错误时将错误信息放在一个String类型的List中,最后判断这个List是否为空,如果为空,转向验证成功页面;如果List不为空,则转向失败页面,显示错误信息。
package com.shengqishiwind.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 { @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(null == username || "".equals(username)) { list.add("username can't be blank!"); } if(null == password || password.length()<6 || password.length()>10) { list.add("password should be between 6 and 10"); } if(null == repassword || repassword.length()<6 || repassword.length()>10) { list.add("repassword should be between 6 and 10"); } if(null != password && null != repassword && !password.equals(repassword)) { list.add("password and repassword don't match!"); } //有两种结果:验证通过和不通过 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); } }
成功页面JSP body部分:
<body> username:<%= request.getAttribute("username") %><br> password:<%= request.getAttribute("password") %><br> </body>
失败页面:
<body> <h1>login failed</h1> <% List<String> list = (List<String>)request.getAttribute("error"); for(String str: list) { out.println(str+"<br>"); } %> </body>
参考资料
圣思园张龙老师Java Web培训视频022。相关文章推荐
- 表单的验证:客户端验证和服务器端验证
- #笔记#圣思园 JavaWeb 第22讲——表单确认,JavaScript和Servlet实现客户端与服务器端验证
- 客户端表单验证&服务器端验证
- 利用Struts的Validator验证框架实现客户端和服务器端双验证
- 客户端表单验证js
- 客户端表单通用验证(转)
- 对于客户端的表单验证,这个基于JavaScript编写的Validator基本上都可以满足
- 对复杂表单进行客户端服务端验证
- 表单提交的客户端验证(通过js函数验证)
- 复杂的表单客户端验证
- mvc表单客户端验证 浏览详细、修改和删除 [转]
- 客户端验证不能代表服务器端验证
- Validator.js 很好用的客户端表单验证
- asp.ne如何使用javascript去验证客户端信息,如果验证成功则送往服务器端处理,否则在客户端提示用户(不返回到服务器端处理)
- WCF服务实现客户端Cookie共享,表单验证的解决方案
- struts2服务器端的表单验证
- 先客户端验证,通过后再执行服务器端事件
- Java Web笔记 – 客户端Javascript与服务器端Servlet的验证
- 组件------客户端和服务器端验证
- 复杂的表单服务器端验证