使用 Ajax 实现本地化后的客户端消息验证

				
# org/rpd/i18n/bundles/Messages.properties - Resource Bundle for default locale
# The sample message key-value pairs...
error.loginid.required = User Name is Mandatory.
error.useremail.required = Email Id is Mandatory.
error.password.required = Password is required.
error.password.length = Password Length should not be less than six(6)character.
error.confirmpassword.required = Confirm Password is required.
error.passwordconfirm.match = Password and Confirm Password does not match.
error.firstName.required = First Name is required.
error.lastName.required = Last Name is required.          

				
package org.rpd.i18n.common;

import java.util.HashMap;
import java.util.Locale;
import java.util.Map;
import java.util.ResourceBundle;

public class ResourceManager {
     // The name and location of the resource bundle.
     private final String mMessageBundle = "org/rpd/i18n/bundles/Messages";
     
     // The loaded message cache...
     private Map<Locale, ResourceBundle> mResourceCache = null;
     
     // Private instance variable.
     private static ResourceManager mManager = null;
     
     // default private constructor.
     private ResourceManager(){
          mResourceCache = new HashMap<Locale, ResourceBundle>();
     }
     
     
     // Get the locale-specific bundle from cache. 
// First load to the cache if not already loaded
     public ResourceBundle getBundle(Locale locale){
          if(locale == null){
               locale = Locale.getDefault();
          }
          if(mResourceCache.containsKey(locale) == false){
               ResourceBundle bundle = ResourceBundle.getBundle(mMessageBundle, locale);
               mResourceCache.put(locale, bundle);
          }
          return mResourceCache.get(locale);
     }

     // Thread safe Singleton pattern implementation... 
     private static ResourceManager getInstance(){
          synchronized (ResourceManager.class) {
               if(mManager == null){
                    mManager = new ResourceManager();
               }
          }
          return mManager;
     }
     
     // Get the message for the key using default locale.
     public static String getMessage(String key){
          return getMessage(key, null);
     }
     
     // Get the message for the key and specified locale.
     public static String getMessage(String key, Locale locale){
          try{
               return getInstance().getBundle(locale).getString(key);
          }catch(Exception e){
               return "";
          }
     }
}             

				
<%@page import="org.rpd.i18n.common.ResourceManager"%>
<%
   // The name of the request parameter representing the input 
   // "HTML Element - Message Key" combination.
   final String REQ_ID = "message-key";
   // Message prefix to be used in output string.
   final String MSG_PREFIX = "begin::";
   // Message suffix to be used in output string.
   final String MSG_SUFFIX = "::end";
   // The standard "HTML Element - Message Key" delimiter.
   final String ELEMENT_KEY_DELIM = ",";
   // The "HTML Element - Localize Message" delimiter to be used in 
   // output string.
   final String KEY_VAL_DELIM = "==";
   
   // Find the request parameter containing the "HTML Element - Message Key" 
   // combination String.
   String keysArr = request.getParameter(REQ_ID);
   // If the desired request parameter doesn't exist, it means request is invalid.
   if(keysArr == null){
        out.println("Invalid message key");
   } else {
        // Split the input using the element - key delimiter (ELEMENT_KEY_DELIM).
        String keys[] = keysArr.split(ELEMENT_KEY_DELIM);
        // Check if the number of tuples is even. If not, it means the input is incorrect.
        if((keys.length%2) != 0){
      out.println("Improper elem-key combination: " + keysArr);
        } else {
      // Iterate through each elem-key combination. 
      for(int i=0; i < keys.length; i = i + 2){
           // Retrieve the localized message against the key. Prepare the result string 
           // as follows: 
           // Message Prefix (followed by) HTML Element key (followed by) Key-value 
           // delimiter 
           // (followed by) Localized value (followed by) Message suffix. 
           out.println(MSG_PREFIX + keys[i].trim() + KEY_VAL_DELIM + 
             ResourceManager.getMessage(keys[i+1].trim(), request.getLocale()) + 
             MSG_SUFFIX);
      }
        }
   }
%>     

				
var xmlHttp = null;
var msgKeys = new Array();
var msgPrefix = "begin::";
var msgSuffix = "::end";
var msgDelimiter = "==";
var jspURL = "MessageResolver.jsp";

// reset msgKeys array.
function resetMsgKeys(){
     msgKeys = new Array();
}
// Adding to the array of keys
function addMsgKey(elemId, msgKey) {
     msgKeys[msgKeys.length] = new Array();
     msgKeys[msgKeys.length - 1][0] = elemId;
     msgKeys[msgKeys.length - 1][1] = msgKey;
     document.getElementById(elemId).innerText = "";
}

//Different browsers use different methods to create XMLHttpRequest objects.

function getXmlHttpObject() {
     xmlHttp = null;
     try {    
            // Firefox, Opera 8.0+, Safari    
   xmlHttp = new XMLHttpRequest();
     }
     catch (e) {    // Internet Explorer    
   try {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (e) {
        try {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {
      alert("Your browser does not support Ajax!");
      return false;
        }
   }
     }
     return xmlHttp;
}


//To pass on the key to the JSP 
function getMessage(key) {
     // checking for browser support
     xmlHttp = getXmlHttpObject();
     if (xmlHttp == null) {
   alert("Browser does not support Ajax");
   return false;
     }
     var url = jspURL + "?message-key=" + key;
     xmlHttp.onreadystatechange = displayMessage;
     xmlHttp.open("GET", url, true);
     xmlHttp.send(null);
}


//Response generated against the request
function displayMessage() {
     if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
   var localizedMsg = xmlHttp.responseText;
   while (true) {
        var begInd = localizedMsg.indexOf(msgPrefix);
        var endInd = localizedMsg.indexOf(msgSuffix);
        if (begInd < 0 || endInd < 0) {
      break;
        }
        var msg = localizedMsg.substring((begInd + msgPrefix.length), endInd);
        var elemVal = msg.split(msgDelimiter);
        document.getElementById(elemVal[0]).innerText 
      = document.getElementById(elemVal[0]).innerText + "**" + elemVal[1];
        localizedMsg = localizedMsg.substring(endInd + msgSuffix.length);
   }
     }
}        

				
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
      <title>New User Registration</title>
      <script type="text/javascript" src="ValidateNewUser.js"> </script>
      <script type="text/javascript" src="MessageDisplay.js"> </script>
   </head>
   <body>
      <form onsubmit="return validateNewUser();" name="frmRegistration" 
         id="frmRegistration" action="#" method="post">
         <table border="0" width="100%">
            <tbody>
               <tr>
                  <td align="right" nowrap="nowrap">&nbsp;Email ID</td>
                  <td align="center">:</td>
                  <td><input type="text" name="emailId" id="emailId" size="20"></td>
                  <td width="100%"><p id="emailErrMsg"></p></td>
               </tr>
               <tr>
                  <td align="right" nowrap="nowrap">User Name</td>
                  <td align="center">:</td>
                  <td><input type="text" name="loginId" id="loginId" size="20"></td>
                  <td width="100%"><p id="loginErrMsg"></p></td>
               </tr>
               <tr>
                  <td align="right" nowrap="nowrap">Password</td>
                  <td align="center">:</td>
                  <td><input type="password" name="password" id="password" 
                        size="20" ></td>
                  <td width="100%"><p id="passwordErrMsg"></p></td>
               </tr>
               <tr>
                  <td align="right" nowrap="nowrap">Confirm Password</td>
                  <td align="center">:</td>
                  <td><input type="password" name="confirmPassword" 
                       id="confirmPassword" size="20"></td>
                  <td width="100%"><p id="confirmpassErrMsg"></p></td>
               </tr>
               <tr>
                  <td align="right" nowrap="nowrap">First Name</td>
                  <td align="center">:</td>
                  <td><input type="text" name="firstName" id="firstName" size="20"></td>
                  <td width="100%"><p id="firstNameErrMsg"></p></td>
               </tr>
               <tr>
                  <td align="right" nowrap="nowrap">Last Name</td>
                  <td align="center">:</td>
                  <td><input type="text" name="lastName" id="lastName" size="20"></td>
                  <td width="100%"><p id="lastNameErrMsg"></p></td>
               </tr>
               <tr>
                  <td colspan="4" align="center">   
                     <input type="submit" name="cmdSubmit" value="Submit">
                  </td>
               </tr>
            </tbody>
         </table>
      </form>
   </body>
</html>      

				
function validateNewUser() {
     resetMsgKeys();
     document.getElementById("loginErrMsg").innerText = "";
     document.getElementById("emailErrMsg").innerText = "";
     document.getElementById("passwordErrMsg").innerText = "";
     document.getElementById("confirmpassErrMsg").innerText = "";
     document.getElementById("firstNameErrMsg").innerText = "";
     document.getElementById("lastNameErrMsg").innerText = "";
               
     if (document.frmRegistration.loginId.value == "") {
          addMsgKey("loginErrMsg", "error.loginid.required");
     }
     if (document.frmRegistration.emailId.value == "") {
          addMsgKey("emailErrMsg", "error.useremail.required");
     
     if (document.frmRegistration.password.value == "") {
          addMsgKey("passwordErrMsg", "error.password.required");
     } else {
          if (document.frmRegistration.password.value.length < "6") {
               addMsgKey("passwordErrMsg", "error.password.length");
          }
     }
     if (document.frmRegistration.confirmPassword.value == "") {
          addMsgKey("confirmpassErrMsg", "error.confirmPassword.required");
     } else {
          if (document.frmRegistration.confirmPassword.value != 
               document.frmRegistration.password.value) {
               addMsgKey("confirmpassErrMsg", "error.passwordconfirm.match");
          }
     }
     if (document.frmRegistration.firstName.value == "") {
          addMsgKey("firstNameErrMsg", "error.firstName.required");
     }
     if (document.frmRegistration.lastName.value == "") {
          addMsgKey("lastNameErrMsg", "error.lastName.required");
     }
     if (msgKeys.length > 0) {
          getMessage(msgKeys);
          return false;
     }
     return true;
}