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

最新推荐文章于 2024-11-01 14:48:20 发布

iteye_9280

最新推荐文章于 2024-11-01 14:48:20 发布

阅读量142

点赞数

分类专栏： JSP&Servlet 文章标签： java javascript ViewUI

本文链接：https://blog.csdn.net/iteye_9280/article/details/82094544

版权

JSP&Servlet 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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

用户名与密码不能为空，且长度在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 οnsubmit="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);
	}

}