表單的驗證：客戶端驗證和服務器端驗證

時間 2019-11-10

標籤表單驗證客戶端服務器欄目 HTML 简体版

原文原文鏈接

表單的驗證：客戶端驗證和服務器端驗證

表單的確認

客戶端確認：javascript

　　減小服務器負載html

　　縮短用戶等待時間java

　　兼容性難服務器

服務器端確認：jsp

　　統一確認ide

　　兼容性強this

　　服務器負載重spa

客戶端驗證例子

　　首先創建一個表單，在其提交時用JavaScript方法進行驗證，若該方法返回true，則進行表單的提交，若返回false，則表單不提交。code

      <!-- 表單提交時執行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方法以下：orm

<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）：

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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];
            
            //判斷用戶名是否爲空
            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>

  </head>
  
  <body>
      <!-- 表單提交時執行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>
  </body>
</html>

　　可是客戶端的驗證是不可靠的，用戶能夠查看源代碼，找到表單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>