登陆界面(jsp)客户端应验 _JavaScript

登陆界面(jsp)客户端验证
第二步：通过servlet处理
 
 
import java.io.IOException;
import java.io.PrintWriter;
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 {

	public void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
			//获得用户的信息
		String username=req.getParameter("username");
		String password=req.getParameter("password");
		String repassword=req.getParameter("repassword");
		String shuoming=req.getParameter("shuoming");//说明
		String []sex=req.getParameterValues("sex");//获得性别
		String []aihao=req.getParameterValues("aihao");//获得兴趣
		String []add=req.getParameterValues("add");//获得地址
		

		
		//String repassword=req.getParameter("repassword");
		//String repassword=req.getParameter("repassword");
		
		List<String> list=new ArrayList<String>();
		List<String> xingqu=new ArrayList<String>();
		if (null=="username"||"".equals(username))
		{
			list.add("there can't be a blank!");			
		}
		if (password==null||password.length()<6||password.length()>10)
		{
			list.add(" the password's length must Between6 and 10 !");
		}
		if (repassword==null||repassword.length()<6||repassword.length()>10)
		{
			list.add(" the password's length must Between 6 and 10!");
		}
		if (password!=null&&repassword!=null&&!password.equals(repassword))
		{
			list.add("the two password isn't the same!");
			
		}
		
		if (list.isEmpty())
		{ 
			req.setAttribute("username",username);
			req.setAttribute("password",password);
			req.setAttribute("repassword",repassword);
			req.setAttribute("shuoming",shuoming);//说明
			for(int i=0;i<sex.length;i++)//性别
			req.setAttribute("sex",sex[i]);
			//兴趣
			for(int i=0;i<aihao.length;i++)
			{
				xingqu.add(aihao[i]);
			}
			req.setAttribute("aihao",xingqu+" ");
		    //地址
			for(int i=0;i<add.length;i++)
				req.setAttribute("add",add[i]);
			//说明
			req.getRequestDispatcher("success.jsp").forward(req,resp);
			
		}
		else
		{
			req.setAttribute("list",list);
			req.getRequestDispatcher("unsuccess.jsp").forward(req,resp);
		}
		
		
	
	}

	
}


最近在学习jsp先写了个登陆界面的例子

第一步：
 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
	<head>
		<title> 登录界面 </title>
		<%--客户端验证服务器端验证未启动 --%>
		<script type="text/javascript">
		  function validate()
		  	{
		  	//判断姓名
		  		var username=document.getElementById("username1");
		  		if (username.value.length==0)
		  		 {
		  		 alert("用户名不能为空！");
		  		 return false;
		  		 }
		  	//判断密码 
		  		var password=document.getElementById("password1");
		  		var repassword=document.getElementById("repassword1");
		  		 
		  		if (password.value.length<6||password.value.length>10)
		  		{
		  		alert("密码长度不能少于六位超过10位！");
		  		return false;
		  		}
		  		if (repassword.value.length<6||repassword.value.length>10)
		  		{
		  		alert("密码长度不能少于六位超过10位！");
		  		return false;
		  		}
		  		if (password.value != repassword.value)
		  		{
		  		alert("两次密码不相同！");
		  		return false;
		  		}
		  		//判断性别
		  		var f=document.getElementById("f");
		  		var m=document.getElementById("m");
		  		if (!f.checked&&!m.checked)
		  		{
		  		alert("性别没选择！");
		  		return false;
		  		}
		  		//判断兴趣选项
		  		var aihao=document.getElementsByName("aihao");
		  		var m=0;
		  		for ( var i=0;i<aihao.length;i++)
		  		{
		  			if (aihao[i].checked)
		  			{
		  			  m++;
		  			}
		  		
		  		}
		  		if (m<2)
		  		{
			  		alert("兴趣必须多于两个！");
			  		return false;
		  		}
		  		//判断说明是否为空
		  		var txtValue=document.getElementById("txtTest").value;
		  		if (txtValue.length<10)
		  		{
		  		    alert("说明长度不能少于十个字母！");
			  		return false;
		  		
		  		}
		  		
	
		  		
		  		return true;
		  		
		  	}
		  
	

		</script>
		
	</head>
	<body>
	  
			
			<form onsubmit="return validate();"  action="validateServlet" >
			
			<%//服务器端验证：<form action="validateServlet"  > %>
			
				<table>
					<tr>
						<td >用户登录：</td>
					</tr>
					
					<tr>
						<td ></td>
					</tr>
					<tr>
						<td>用户名：</td>
						<td><input type="text" name="username" id="username1"></td>
					</tr>
					<tr>
						<td>密   码：</td>
						<td><input type="password" name="password" id="password1"></td>
					</tr>
					<tr>
						<td>重新输入密码：</td>
						<td><input type="password" name="repassword" id="repassword1"></td>
					</tr>
					<tr>
						<td>性   别：</td>
						<td>男：<input type="radio" name="sex"  value="female" id="f" ></td>
						<td>女：<input type="radio" name="sex" id="male"></td>
					
					</tr>
					<tr>
						<td>兴   趣：</td>
						<td>篮球：<input type="checkbox" name="aihao" value="basketball"></td>
						<td>足球：<input type="checkbox"" name="aihao" value="football" ></td>
						<td>听歌：<input type="checkbox"" name="aihao" value="music"></td>
						<td>书法：<input type="checkbox"" name="aihao" value="writing"></td>
					
					</tr>
					<tr>
						<td>地   址：</td>
						<td><select name="add" size="1">
							<option value="shanghai" selected>上海
							<option value="yantai" >烟台
							<option value="beijing" >北京
						
							</select></td>
					</tr>
					<tr>
						<td>说   明：</td>
						<td><textarea name="shuoming" clos="20" rows="5" id="txtTest"></textarea></td>
						
					
					</tr>
			
					<tr>
						<td><input type="submit" value="提交" ></td>
						<td><input type="reset" value="重置"></td>
					</tr>
				 </table> 
				
				
				
				
			
			  </form>
			
			<a href="http://www.baidu.com">百度</a>
			
			
			
			
			
			
  </body>
</html>
 
登陆成功页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
  <head>
   
    <title>成功登陆页面</title>
    
	
  </head>
  
  <body>
    
    <%= "个人信息："+"<br>" +"<br>"+"<br>"%>
    <%= "姓名: "+request.getAttribute("username")+"<br>" %>
    <%= "密码: "+request.getAttribute("password")+"<br>" %>
    <%= "性别: "+request.getAttribute("sex")+"<br>" %>
    <%= "兴趣: "+request.getAttribute("aihao")+"<br>" %>
    <%= "地址: "+request.getAttribute("add") +"<br>"%>
    <%= "说明 : "+request.getAttribute("shuoming")+"<br>" %>
    
    
    
   
    
    
  </body>
</html>