`

Web开发10：对复杂表单进行客户端服务端验证

 
阅读更多

对上面这个用户基本信息页面进行客户端与服务器端的验证，下面是验证条件

用户名与密码不能为空，且长度在4与10之间。

性别必须选择一个，兴趣也必须选择一个，不能超过三个。

地址不作要求，说明必填。

userlogin.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<head>
	<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 == 4){
				alert("兴趣不能超过三项");
				return false;
			}
			if(comment.value.length <1){
				alert("说明必须填写");
				return false;
			}
			return true;
		}
	</script>
</head>
<html> 
  <body>
  	<form onsubmit="return validate();" action="UserValidateServlet"> 
  		用户名：<input type="text" name="username"/><br>
  		密  码：<input type="password" name="password"/><br>
  		性别： 男<input type="radio" name="gender" value="男"/>&nbsp;&nbsp; 女<input type="radio" name="gender" value="女"/><br>
  		兴趣：足球<input type="checkbox" name="interest" value="足球"/>&nbsp;&nbsp;
  		篮球<input type="checkbox" name="interest" value="篮球"/>&nbsp;&nbsp;
  		排球<input type="checkbox" name="interest" value="排球"/>&nbsp;&nbsp;
  		羽毛球<input type="checkbox" name="interest" value="羽毛球"/>&nbsp;&nbsp;<br>
  		地址：
  		<select name="address">
  			<option value="上海">上海</option>
  			<option value="北京">北京</option>
  			<option value="天津">天津</option>
  		</select>
  		<br>
  		说明：
  		<textarea name="comment" rows="15" cols="20"></textarea><br>
  		<input type="submit" value="点击确认">&nbsp;&nbsp;&nbsp;<input type="reset" value="重置">
  	</form>
  </body>
</html>

 

服务器端验证：新建一个Servlet

UserValidateServlet.java

package com.test.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 UserValidateServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		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(username == null || password == null){
			list.add("用户名或密码不能为空");
		}
		if((username.length() <4 || username.length() >10) || (password.length() <4 || password.length() >10)){
			list.add("用户名或密码的长度不能小于4或大于10");
		}
		if(gender == null){
			list.add("性别必须选择");
		}
		if(comment == null){
			list.add("评论不能为空");
		}
		if(interest == null || interest.length > 3){
			list.add("兴趣不能为空或选择不能超过3个");
		}
		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("list", list);
			request.getRequestDispatcher("loginFail.jsp").forward(request, response);
		}
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		super.doPost(request, response);
	}

}

 

分享到：
| Web开发9：JavaBean
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    客户端统一验证JavaScript函数库及示例源码

    Web应用如此广泛，其中客户端与服务端交互时所消耗的资源及响应时间，频繁的刷新页面使得人机交互体验极为不好，而对每个页面使用客户端处理技术无疑又加大项目开发周期，脚本调试及修改维护的工作量将占用大量的...

    web_framework:一个使用Python基于socket开发的MVC架构的Web框架

    通过生成摘要，加盐等方法生成可进行过期时间验证的CSRF Token并分发在表单中。 实现服务端对CSRF Token的验证。 通过Jinja2对静态HTML内容的自动转义以应对XSS攻击。 使用原生JavaScript实现对动态内容的

    NFine快速开发框架源码 NFineRapidFramework.rar

    服务端验证：实体模型验证、自己封装Validator 缓存框架：微软自带Cache、Redis 日志管理：Log4net、登录日志、操作日志 工具类：NPOI、Newtonsoft.Json、验证码、丰富公共类似 三、注意事项 1、开发环境为...

    ASP.NET MVC+EF6+Bootstrap开发C#源代码

    包括源代码、数据库文档、数据库创建SQL脚本。...服务端验证：实体模型验证、自己封装Validator 缓存框架：微软自带Cache、Redis 日志管理：Log4net、登录日志、操作日志 工具类：NPOI、Newtonsoft.Json、验证码

    表单的验证

    在 HTML 表单中结合 Asynchronous JavaScript™ + XML (Ajax) 的服务器回调机制，对表单应用 Ajax，对于为应用程序增加 Web 2.0 功能来说是一种可行的办法。通过本文了解增加 Ajax 代码改进 PHP 应用程序用户体验的...

    vc模拟网页发送表单 51网站自动登录

    利用套接字把网页中form中的内容发送到server端，服务端验证用户名 密码登陆

    各种AJAX方法的使用比较详解

    第一代技术：生成客户端代理脚本调用服务端 新技术的改进方向 第二代技术：jQuery直接调用WebService 第三代技术：更简单的数据格式 第四代技术：直接提交表单 多submit按钮的提交（用jQuery.form实现） 批量...

    详解ABP框架的参数有效性验证和权限验证

    在Web应用中，通常进行2次数据有效性检验：包括客户端检验和服务端检验。客户端的检验主要是使用户有一个好的用户体验。 首先最好是在客户端检验其表单输入的有效性并且展示给客户端的那些字段输入是无效的。但是，...

    史上最好传智播客就业班.net培训教程60G 不下会后悔

    这是一个典型的B2C网上商城，使用经典的复杂三层架构（工厂模式）进行开发。涉及图书管理、搜索、订单管理、导航管理等核心模块。在讲解ASP.Net基础后安排这样一个B2C网上商城系统，让学员在实际项目中将学到的知识...

    软件生产平台

    10、业务表单运行器 业务表单运行器是业务表单设计器设计出的表单在系统中进行操作的时候运行器 集中处理表单上定义的控件与业务数据之间的关系以及表单域数据的验证功能 11、业务流程运行器 ...

    精通AngularJS part1

    提供服务端验证API192 72保护局部模板193 73阻止恶意攻击194 防止cookie监听、中间人攻击194 防止跨站脚本攻击195 确保AngularJS表达式内HTML内容的安全性195 允许不安全的HTML绑定196 净化HTML196 防止JSON...

    asp.net知识库

    如何在客户端调用服务端代码 页面一postback，它就显示页面的最顶端，怎样让它定位在某一位置？ 如何保证页面刷新后的滚动条位置 清除网页历史记录，屏蔽后退按钮! 如何传值在2个页面之间 ：要求不刷新父页面，并且...

    自然框架项目

    单点登录，服务端的验证功能，也是服务中心的一部分 12. Nature.Service.UserCenter 用户中心，配合单点登录，对用户的登录账户、密码做统一的管理。权限服务（权限过滤、权限判断）。 13. Nature.Service....

    大名鼎鼎SWFUpload- Flash+JS 上传

    　SWFUpload是一个客户端文件上传工具，最初由Vinterwebb.se开发，它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。 [编辑本段]SWFUpload的主要特点 　* 可以...

    GoodProject Maven Webapp.zip

    3:表示层:主要对用户的请求接受，以及数据的返回，为客户端提供应用程序的访问。 功能技术亮点：1，验证码 验证码（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”...

    Grails 中文参考手册

    7.3 客户端验证 7.4 验证和国际化 8. 服务层 8.1 声明式事务 8.2 服务的作用域 8.3 依赖注入和服务 8.4 使用Java的服务 9. 测试 9.1 单元测试 9.2 集成测试 9.3 功能测试 10. 国际化 10.1 理解信息绑定 10.2 改变...

    java源码包---java 源码 大量 实例

    　Tcp服务端与客户端的JAVA实例源代码，一个简单的Java TCP服务器端程序，别外还有一个客户端的程序，两者互相配合可以开发出超多的网络程序，这是最基础的部分。 递归遍历矩阵 1个目标文件，简单！ 多人聊天室 3...

    java源码包2

    　Tcp服务端与客户端的JAVA实例源代码，一个简单的Java TCP服务器端程序，别外还有一个客户端的程序，两者互相配合可以开发出超多的网络程序，这是最基础的部分。 递归遍历矩阵 1个目标文件，简单！ 多人聊天室 ...

Magicbox
Global site tag (gtag.js) - Google Analytics