Ajax 輸入驗證

<script>function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}</script>表單資料的驗證可以分為客戶端驗證與伺服端驗證,為了安全起見,避免客戶端驗證被跳過,伺服端驗證往往是必須的。

當使用者在表單中輸入資料時,在過去往往只能靠使用者完成資料輸入,再按下「送出」按鈕,才可以進行伺服端驗證,現在可以利用非同步請求方式,在使用者某 些欄位輸入完成之後,就以非同步方式在背景發送請求給伺服端進行驗證,若有誤再以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();
}
}



你可能感兴趣的:(JavaScript,html,Ajax,cache,servlet)