对复杂表单进行客户端服务端验证

来源：互联网发布：webshell提权工具包编辑：程序博客网时间：2024/05/19 15:20

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

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

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

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

userlogin.jsp

Html代码  
<%@ 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

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);  
    }  
  
}  

0 0