From Gossip@caterpillar

Ajax Gossip: 輸入驗證

表單資料的驗證可以分為客戶端驗證與伺服端驗證，為了安全起見，避免客戶端驗證被跳過，伺服端驗證往往是必須的。

當使用者在表單中輸入資料時，在過去往往只能靠使用者完成資料輸入，再按下「送出」按鈕，才可以進行伺服端驗證，現在可以利用非同步請求方式，在使用者某些欄位輸入完成之後，就以非同步方式在背景發送請求給伺服端進行驗證，若有誤再以DOM更新頁面訊息，使用者可以即時發現先前錯誤的輸入。

舉個例子來說，有個網頁必須輸入帳戶號碼與姓名，帳戶號碼是XXX-XXXXXX-X的格式，X為數字：

InputValidateEx-1.html

<!DOCTYPE html PUBLIC 
  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>輸入驗證</title>
<script type="text/javascript" src="InputValidateEx-1.js"></script>
</head>
<body>
    帳戶號碼： <input id="number" type="text" size="10" onchange="validate();"/>
    <div id="numberMessage"></div>
    姓名： <input type="text" size="10"/>
</body>
</html>

當使用者在帳戶號碼輸入完成，轉而輸入姓名時，這時會觸發onchange事件而執行validate()函式，您可以在validate()函式中發送號碼欄位，以非同步方式向伺服端要求驗證：

InputValidateEx-1.js

var xmlHttp;

function createXMLHttpRequest() {
    if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    else if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}


function validate() {
    var number = document.getElementById("number").value;
    var url = "ValidateServlet?number=" + escape(number);
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", url);
    xmlHttp.send(null);
}

function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
	    var pass = xmlHttp.responseXML.getElementsByTagName(
                                        "pass")[0].firstChild.data;
            var message = xmlHttp.responseXML.getElementsByTagName(
                                        "message")[0].firstChild.data;
			
            if(pass === "false") {
                color = "green";
                document.getElementById("numberMessage").innerHTML = 
                "<font color='red'>" + message + " </font>";
            }
	    else {
	        document.getElementById("numberMessage").innerHTML = "";
            }
        }
    }
}

伺服端會傳回XML作為回應，當中包括以下訊息：

<response>
<pass>false</pass>
<message>輸入的格式有誤</message>
</response>

所以程式上設定，當格式錯誤時<pass>為false，此時以紅字在網頁上顯示錯誤訊息，如果正確則什麼都不作。

您可以搭配以下這個簡單的Servlet來進行驗證：

ValidateServlet.java

package onlyfun.caterpillar;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ValidateServlet extends javax.servlet.http.HttpServlet 
                                implements javax.servlet.Servlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
                            throws ServletException, IOException {
        boolean pass = request.getParameter(
                         "number").matches("[0-9]{3}-[0-9]{6}-[0-9]");
        
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        response.setCharacterEncoding("UTF8");
        
        String message = "輸入的格式有誤";
        
        if (pass) {
            message = "OK！";
        }
        
        PrintWriter out = response.getWriter();
        out.println("<response>");
        out.println("<pass>" + pass + "</pass>");
        out.println("<message>" + message + "</message>");
        out.println("</response>");
        out.close();
    }
}