Web开发8：使用JavaScript与Servlet实现客户端与服务器端验证-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_9280/article/details/82093958

下面写一个注册页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<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];*/
				
				/*或通过getElementsByTagName来取值，同样，它返回的也是一个数组
				var inputs = document.getElementsByTagName("input");
				for(var i =0;i<inputs.length;i++){
					alert(inputs[i].value);
				}*/
				//用户名不能为空
				if(username.value == ""){
					alert("username can't be null!");
					return false;
				}
				//密码长度不能少于6
				if(password.value.length < 6 || repassword.value.length < 6 ){
					alert("password'length can't less than 6");
					return false; 
				}
				//密码不相同
				if(password.value != repassword.value){
					alert("password not same!");
					return false;
				}
				
			}
		</script>
	</head>
  <body>
  	<!-- <form action="ValidateServlet" οnsubmit="return validate()">  -->
  	<form action="ValidateServlet">
	    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">
    </form>
  </body>
</html>

ValidateServlet.java 在后台进行验证

package com.kingdee.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 {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		String repassword = request.getParameter("repassword");
		List<String> list = new ArrayList<String>();
		
		if(username == null || "".equals(username)){
			list.add("username can't be null");
		}
		if(password.length() <6 || repassword.length() <6){
			list.add("password can't less than 6");
		}
		if(!password.equals(repassword)){
			list.add("password not same");
		}
		if(list.isEmpty()){
			request.setAttribute("username", username);
			request.setAttribute("password", password);
			request.setAttribute("repassword", repassword);
			request.getRequestDispatcher("success.jsp").forward(request, response);
		}else{
			request.setAttribute("error", list);
			request.getRequestDispatcher("error.jsp").forward(request, response);;
		}
	}

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

}

success.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
  <body>
    <%
    	String username = (String)request.getAttribute("username");
    	String password = (String)request.getAttribute("password");
    	String repassword = (String)request.getAttribute("repassword");
     %>
     username:<%=username %><br>
     password:<%=password %><br>
     repassword:<%=repassword %>
  </body>
</html>

error.jsp

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

<html>
  <body>
     <%
    	List<String> list = (List<String>)request.getAttribute("error");
     %>
     <h1>Register Failed!</h1>
     <%
     	for(String str:list){
     		out.println(str+"<br>");
     	}
      %>
  </body>
</html>