表单的验证：客户端验证和服务器端验证

 

表单的验证：客户端验证和服务器端验证

表单的确认

客户端确认：

　　减少服务器负载

　　缩短用户等待时间

　　兼容性难

服务器端确认：

　　统一确认

　　兼容性强

　　服务器负载重

客户端验证例子

　　首先建立一个表单，在其提交时用JavaScript方法进行验证，若该方法返回true，则进行表单的提交，若返回false，则表单不提交。

      <!-- 表单提交时执行JavaScript方法validate(),如果该方法返回false，那么表单是不会提交的 -->
    <form onsubmit="return validate()" action="servlet/ValidateServlet">
    username:<input type="text" name="username" id="username1"><br>
    password:<input type="password" name="password" id="password1"><br>
    re-password:<input type="password" name="repassword" id="repassword1"><br>
    <input type="submit" value="submit">
    </form>

　　其中用于验证的JavaScript方法如下：

<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];
            
            //判断用户名是否为空
            if("" == username.value)
            {
                //判断语句也可以写： username.value.length == 0
                alert("username can't be blank!");
                return false;
                
            }
            
            //密码和重复密码内容一样，长度在6到10之间
            
            //先验证密码长度
            if(password.value.length < 6 || password.value.length > 10)
            {
                alert("length of password is invalid!");
                return false;
            }
            if(repassword.value.length < 6 || repassword.value.length > 10)
            {
                alert("length of repassword is invalid!");
                return false;
            }
            
            //再验证重复密码和密码是否相同
            if(password != repassword)
            {
                alert("password and repassword don't match!");
                return false;
                 
            }
            
            //通过重重考验后返回true，进行表单提交
            return true;
        
        }
    </script>

　　在验证有误的时候，弹出对话框提示，并且返回false，不提交表单。

　　完整的login.jsp如下（在客户端验证的时候可以先不管转向的Servlet）：

　　但是客户端的验证是不可靠的，用户可以查看源代码，找到表单action的Servlet，然后转向这个地址，将参数用?连接在地址之后，这时候参数是没有经过客户端校验的。

服务器端验证例子

　　从表单中获得参数：JSP通过request内置对象获取表单信息，用不同的方法获取不同种类的信息。

　　服务器端验证程序，先将客户端验证部分去掉，即去掉 表单中的：onsubmit="return validate()"

　　那么用户在表单中提交的数据将直接传到服务器端，服务器端Servlet对其进行验证：

　　方式如下：有错误时将错误信息放在一个String类型的List中，最后判断这个List是否为空，如果为空，转向验证成功页面；如果List不为空，则转向失败页面，显示错误信息。

package com.shengqishiwind.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
{
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException
    {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String repassword = req.getParameter("repassword");
        
        List<String> list = new ArrayList<String>();
        if(null == username || "".equals(username))
        {
            list.add("username can't be blank!");
        }
        
        if(null == password || password.length()<6 || password.length()>10)
        {
            list.add("password should be between 6 and 10");
        }
        if(null == repassword || repassword.length()<6 || repassword.length()>10)
        {
            list.add("repassword should be between 6 and 10");
        }
        
        if(null != password && null != repassword && !password.equals(repassword))
        {
            list.add("password and repassword don't match!");
        }
        
        //有两种结果：验证通过和不通过
        if(list.isEmpty())
        {
            req.setAttribute("username", username);
            req.setAttribute("password", password);
            req.getRequestDispatcher("../success.jsp").forward(req, resp);
            
        }
        else 
        {
            req.setAttribute("error", list);
            req.getRequestDispatcher("../error.jsp").forward(req, resp);
        }
        

    }
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException
    {

        this.doGet(req, resp);
    }

}

　　成功页面JSP body部分：

  <body>
    username:<%= request.getAttribute("username") %><br>
    password:<%= request.getAttribute("password") %><br>
  </body>

　　失败页面：

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

参考资料

　　圣思园张龙老师Java Web培训视频022。