|
用 JSP 在客戶端生成 JavaScript 代碼來實現表單校驗
●○●○●○●○●○●○●○●○●○●○●○●○●○●○
○ 作者:劉湛 日期:2000-01-05 jeru@163.net ●
● http://www.cyberlabs.com/~jeru/ ○
○ 歡迎訪問爪哇人，獲取更多資料 ●
●○●○●○●○●○●○●○●○●○●○●○●○●○●○
今天費了一天時間就是做這個東西，原理很簡單，就是用 JSP 在頁面的開始部分生成一段代碼，
如 errorcheck.jsp 中所示，但程序太長，還是費了我不少時間來改寫。
主程序是名為 ErrorCheck.java ，有了這個 ErrorCheck 的 Bean，我們就再也不用為了表單校驗去
寫那一大堆煩人的 JavaScript 代碼了。ErrorCheck 類已幫我們生成了幾乎所有你將會用到的校驗方法，
如是否為數字，長度的校驗，是否為合法email等，你只需在 jsp 頁面里調用相應的函數就可以了。
目前一共有七個函數：
一 檢測是否為數字
//輸入輸入框名和錯誤提示信息
numericCheck(String inputName,String errorMsg);
二 檢測email是否合法
//輸入輸入框名和錯誤提示信息
emailCheck(String inputName,String errorMsg);
三 檢測電話號碼是否合法
//輸入輸入框名和錯誤提示信息
telCheck(String inputName,String errorMsg);
四 檢測字串長度是否在規定范圍那內
//輸入輸入框名,錯誤提示信息,最小長度，最大長度
lengthCheck(String inputName,String errorMsg,int min,int max);
五 檢測字串中是否不含禁止的字串
//輸入輸入框名,錯誤提示信息,禁止字串
denyStrCheck(String inputName,String errorMsg,String str);
六 檢測字串中是否含給定字串
//輸入輸入框名,錯誤提示信息,指定字串
stringCheck(String inputName,String errorMsg,String str);
七 檢測日期格式是否為 "yyyy-mm-dd"
//輸入輸入框名和錯誤提示信息
dateCheck(String inputName,String errorMsg);
只要調用一下這個bean，然后用setFromName()設定你的表單名，再調用以上函數，
最后 out.println(yourID.ErrorCheckScript()),就輸出了一段 JavaScript 代碼了，當然了，
別忘了這個 <form name=myForm onsubmit="return errorCheck();">
ok,just enjoy it,今天太累，不想多少，有任何意見請寫信給我或在我主頁上留言。
注：我調試 errorcheck.jsp 的時候因服務器的問題不知為何不能用 usebean,setProperty 的方法，
只好 new 了一下，我想你們是應該可以用useBean和setProperty的,自己改一下吧。
===================================== errorcheck.jsp =====================================
<%@ page language="java" import="dbclass.*" %>
<%@ page contentType="text/html; charset=gb2312" %>
<jsp:useBean id="cc" scope="page" class="dbclass.ErrorCheck" />
<%
ErrorCheck ec = new ErrorCheck();
ec.setFormName("myForm");
ec.numericCheck("number","The Number you input is invalid!");
ec.emailCheck("email","The Email you input is invalid!");
ec.telCheck("tel","The telephone you input is invalid!");
ec.lengthCheck("strlen","The string you input in the fourth field in not between 6-8",6,8);
ec.denyStrCheck("nojeru","The fifith field must not contain 'jeru'","jeru");
ec.stringCheck("jeru","The sixth field must not null and contian 'jeru'","jeru");
ec.dateCheck("date","The date you input is invalid,should be yyyy-mm-dd");
out.println(ec.ErrorCheckScript());
%>
<html>
<body style="font-size:9pt; font-family:Arial;">
<h1>Errocheck Test</h1>
<hr>
<form name=myForm onsubmit="return errorCheck();">
input a number:<br>
<input type="text" name="number"><p>
input a emial:<br>
<input type="text" name="email"><p>
input a telephone:<br>
<input type="text" name="tel"><p>
input a string (length should between 6-8):<br>
<input type="text" name="strlen"><p>
input a string (shoulde not contain "jeru"):<br>
<input type="text" name="nojeru"><p>
input a string (must contain "jeru"):<br>
<input type="text" name="jeru"><p>
input a date (yyyy-mm-dd):<br>
<input type="text" name="date"><p>
<br><input type="submit" name="submit" value="go">
</form>
</body>
</html>
===================================== ErrorCheck.java =====================================
package dbclass;
/**
* ErrorCheck v 1.0
*
* 這個類是用來在客戶端生成 JavaScript 代碼來校驗表單的
* 原是版本是同事 Macro 用 PHP 寫的，我感覺十分好用，再也
* 不用再為那些表單區寫煩人的 javascript 代碼拉，感謝他！
* 這次我用 Java 改寫，封裝成一個類，并修復了少許的 bug,加
* 多了一條校驗的功能,它的擴展性很好，以后可能會繼續完善。
*
* Mender :
* Jeru Liu
* Homepage :
* http://www.cyberlabs.com/~jeru/
* Email: jeru@163.net
*
*/
import java.io.*;
public class ErrorCheck{
/* public: the javascript string */
String errorCheckStr;
/* public: the form name you used */
public String formName;
public void setFormName(String formName) {
this.formName = formName;
}
/***************************************************************************\
*public: constructor functions
*構造函數
\***************************************************************************/
public ErrorCheck(){
this.errorCheckStr =
"<script ID=clientEventHandlersJS language=javascript>" + "\n" +
"<!--" + "\n";
this.neededFunction();// load the needed functions
this.errorCheckStr +=
"function errorCheck() {" + "\n";
}
/***************************************************************************\
*public: export javascript script
*輸出 JAVASCRIPT 腳本
\***************************************************************************/
public String ErrorCheckScript(){
this.errorCheckStr +=
"}" + "\n" +
"-->" + "\n" +
"</script>" + "\n";
return this.errorCheckStr;
}
/***************************************************************************\
*public: check the numeric
*檢查錄入框值是否是數字
\***************************************************************************/
public void numericCheck(String inputName, String errorMsg){
this.errorCheckStr +=
"if(fucCheckNUM(document."+formName+"."+inputName+".value) == 0) {" + "\n" +
"alert(\""+errorMsg+".\");" + "\n" +
"document."+formName+"."+inputName+".focus();" + "\n" +
"return(false);" + "\n" +
"}" + "\n\n";
}
/***************************************************************************\
*public: check the length
*檢查錄入框值的長度
\***************************************************************************/
public void lengthCheck(String inputName, String errorMsg, int MinLength, int MaxLength) {
this.errorCheckStr +=
"if(fucCheckLength(document."+formName+"."+inputName+".value)<"+MinLength+" || " + "\n" +
"fucCheckLength(document."+formName+"."+inputName+".value)>"+MaxLength+") {" + "\n" +
"alert(\""+errorMsg+".\");" + "\n" +
"document."+formName+"."+inputName+".focus();" + "\n" +
"return(false);" + "\n" +
"}" + "\n\n";
}
/***************************************************************************\
*public: check the email
*檢查錄入框值是否是正確的EMAIL格式
\***************************************************************************/
public void emailCheck(String inputName, String errorMsg){
this.errorCheckStr +=
"if(chkemail(document."+formName+"."+inputName+".value) == 0) {" + "\n" +
"alert(\""+errorMsg+".\");" + "\n" +
"document."+formName+"."+inputName+".focus();" + "\n" +
"return(false);" + "\n" +
"}" + "\n\n";
}
/***************************************************************************\
*public: check the telephone number
*檢查錄入框值是否是電話號碼
\***************************************************************************/
public void telCheck(String inputName, String errorMsg){
this.errorCheckStr +=
"if(fucCheckTEL(document."+formName+"."+inputName+".value) == 0) {" + "\n" +
"alert(\""+errorMsg+".\");" + "\n" +
"document."+formName+"."+inputName+".focus();" + "\n" +
"return(false);" + "\n" +
"}" + "\n\n";
}
/***************************************************************************\
*public: check if the input value contian the prefered string
*檢查錄入框值是否是包含給定字串
\***************************************************************************/
public void stringCheck(String inputName, String errorMsg, String string){
this.errorCheckStr +=
"if(document."+formName+"."+inputName+".value.indexOf(\""+string+"\") != 0) {" + "\n" +
"alert(\""+errorMsg+".\");" + "\n" +
"document."+formName+"."+inputName+".focus();" + "\n" +
"return(false);" + "\n" +
"}" + "\n\n";
}
/***************************************************************************\
*public: check if the input value contain the denyed string
*檢查錄入框值是否是包含給禁止的字串
\***************************************************************************/
public void denyStrCheck(String inputName, String errorMsg, String string){
this.errorCheckStr +=
"if (document."+formName+"."+inputName+".value.length == 0 || " + "\n" +
"document."+formName+"."+inputName+".value.indexOf(\""+string+"\") != -1) {" + "\n" +
"alert(\""+errorMsg+".\");" + "\n" +
"document."+formName+"."+inputName+".focus();" + "\n" +
"return(false);" + "\n" +
"}" + "\n\n";
}
/***************************************************************************\
*public: check the YYYY-MM-DD format date
*檢查錄入框值是否是YYYY-MM-DD的日期格式
\***************************************************************************/
public void dateCheck(String inputName, String errorMsg){
this.errorCheckStr +=
"if(chkdate(document."+formName+"."+inputName+".value) == 0) {" + "\n" +
"alert(\""+errorMsg+".\");" + "\n" +
"document."+formName+"."+inputName+".focus();" + "\n" +
"return(false);" + "\n" +
"}" + "\n\n";
}
public void neededFunction(){
this.errorCheckStr +=
"//函數名：fucCheckNUM" + "\n" +
"//功能介紹：檢查是否為數字" + "\n" +
"//參數說明：要檢查的數字" + "\n" +
"//返回值：1為是數字，0為不是數字" + "\n" +
"function fucCheckNUM(NUM) {" + "\n" +
"var i,j,strTemp;" + "\n" +
"strTemp=\"0123456789\";" + "\n" +
"if ( NUM.length == 0) return 0;" + "\n" +
"for (i=0;i<NUM.length;i++){" + "\n" +
"j = strTemp.indexOf(NUM.charAt(i));" + "\n" +
"if (j==-1) {" + "\n" +
"//說明有字符不是數字" + "\n" +
"return 0;" + "\n" +
"}" + "\n" +
"}" + "\n" +
"//說明是數字" + "\n" +
"return 1;" + "\n" +
"}" + "\n\n" +
"//函數名：fucCheckLength" + "\n" +
"//功能介紹：檢查字符串的長度" + "\n" +
"//參數說明：要檢查的字符串" + "\n" +
"//返回值：長度值" + "\n" +
"function fucCheckLength(strTemp) {" + "\n" +
"var i,sum;" + "\n" +
"sum=0;" + "\n" +
"for(i=0;i<strTemp.length;i++) {" + "\n" +
"if ((strTemp.charCodeAt(i)>=0) && (strTemp.charCodeAt(i)<=255))" + "\n" +
"sum=sum+1;" + "\n" +
"else" + "\n" +
"sum=sum+2;" + "\n" +
"}" + "\n" +
"return sum;" + "\n" +
"}" + "\n\n" +
"//函數名：chkemail" + "\n" +
"//功能介紹：檢查是否為Email Address" + "\n" +
"//參數說明：要檢查的字符串" + "\n" +
"//返回值：0：不是1：是" + "\n" +
"function chkemail(a){" + "\n" +
"var i=a.length;" + "\n" +
"var temp = a.indexOf('@');" + "\n" +
"var tempd = a.indexOf('.');" + "\n" +
"if (temp > 1) {" + "\n" +
"if ((i-temp) > 3) {" + "\n" +
"if (tempd!=-1) {" + "\n" +
"return 1;" + "\n" +
"}" + "\n" +
"}" + "\n" +
"}" + "\n" +
"return 0;" + "\n" +
"}" + "\n\n" +
"//函數名：fucCheckTEL" + "\n" +
"//功能介紹：檢查是否為電話號碼" + "\n" +
"//參數說明：要檢查的字符串" + "\n" +
"//返回值：1為是合法，0為不合法" + "\n" +
"function fucCheckTEL(TEL) {" + "\n" +
"var i,j,strTemp;" + "\n" +
"strTemp=\"0123456789-()#\";" + "\n" +
"if (TEL.length == 0) return 0;" + "\n" +
"for (i=0;i<TEL.length;i++) {" + "\n" +
"j=strTemp.indexOf(TEL.charAt(i));" + "\n" +
"if (j==-1) {" + "\n" +
"//說明有字符不合法" + "\n" +
"return 0;" + "\n" +
"}" + "\n" +
"}" + "\n" +
"//說明合法" + "\n" +
"return 1;" + "\n" +
"}" + "\n\n" +
"//函數名：chkdate(YYYY-MM-DD)" + "\n" +
"//功能介紹：檢查是否為日期" + "\n" +
"//參數說明：要檢查的字符串" + "\n" +
"//返回值：0：不是日期1：是日期" + "\n" +
"function chkdate(datestr) {" + "\n" +
"var lthdatestr" + "\n" +
"if (datestr != \"\")" + "\n" +
"lthdatestr= datestr.length ;" + "\n" +
"else" + "\n" +
"lthdatestr=0;" + "\n" +
"var tmpy=\"\";" + "\n" +
"var tmpm=\"\";" + "\n" +
"var tmpd=\"\";" + "\n" +
"//var datestr;" + "\n" +
"var status;" + "\n" +
"status=0;" + "\n" +
"if ( lthdatestr== 0)" + "\n" +
"return 0;" + "\n" +
"for (i=0;i<lthdatestr;i++) {" + "\n" +
"if (datestr.charAt(i)== '-') {" + "\n" +
"status++;" + "\n" +
"}" + "\n" +
"if (status>2) {" + "\n" +
"return 0;" + "\n" +
"}" + "\n" +
"if ((status==0) && (datestr.charAt(i)!='-')) {" + "\n" +
"tmpy=tmpy+datestr.charAt(i)" + "\n" +
"}" + "\n" +
"if ((status==1) && (datestr.charAt(i)!='-')) {" + "\n" +
"tmpm=tmpm+datestr.charAt(i)" + "\n" +
"}" + "\n" +
"if ((status==2) && (datestr.charAt(i)!='-')) {" + "\n" +
"tmpd=tmpd+datestr.charAt(i)" + "\n" +
"}" + "\n" +
"}" + "\n" +
"year=new String (tmpy);" + "\n" +
"month=new String (tmpm);" + "\n" +
"day=new String (tmpd)" + "\n" +
"if ((tmpy.length!=4) || (tmpm.length>2) || (tmpd.length>2)) {" + "\n" +
"return 0;" + "\n" +
"}" + "\n" +
"if (!((1<=month) && (12>=month) && (31>=day) && (1<=day)) ) {" + "\n" +
"return 0;" + "\n" +
"}" + "\n" +
"if (!((year % 4)==0) && (month==2) && (day==29)) {" + "\n" +
"return 0;" + "\n" +
"}" + "\n" +
"if ((month<=7) && ((month % 2)==0) && (day>=31)) {" + "\n" +
"return 0;" + "\n" +
"}" + "\n" +
"if ((month>=8) && ((month % 2)==1) && (day>=31)) {" + "\n" +
"return 0;" + "\n" +
"}" + "\n" +
"if ((month==2) && (day==30)) {" + "\n" +
"return 0;" + "\n" +
"}" + "\n" +
"return 1;" + "\n" +
"}" + "\n\n";
}
/*public static void main(String[] args) {
ErrorCheck ec = new ErrorCheck("testFrom");
String script = ec.ErrorCheckScript();
System.out.println(script);
} */
}
|
