表單的驗證：客戶端驗證和服務器端驗證
表單的確認
客戶端確認：
減少服務器負載
縮短用戶等待時間
兼容性難
服務器端確認：
統一確認
兼容性強
服務器負載重
客戶端驗證例子
首先建立一個表單，在其提交時用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）：
<%@ 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>
參考資料
聖思園張龍老師Java Web培訓視頻022。