?? 用 jsp 在客戶端生成 javascript 代碼來(lái)實(shí)現(xiàn)表單校驗(yàn).txt
字號(hào):
作者：jeru
email: jeru@163.net
日期：2001-1-5 18:10:04
用 JSP 在客戶端生成 JavaScript 代碼來(lái)實(shí)現(xiàn)表單校驗(yàn)
●○●○●○●○●○●○●○●○●○●○●○●○●○●○
○ 作者:劉湛 日期:2000-01-05 jeru@163.net ●
● http://www.cyberlabs.com/~jeru/ ○
○ 歡迎訪問(wèn)爪哇人，獲取更多資料 ●
●○●○●○●○●○●○●○●○●○●○●○●○●○●○
今天費(fèi)了一天時(shí)間就是做這個(gè)東西，原理很簡(jiǎn)單，就是用 JSP 在頁(yè)面的開(kāi)始部分生成一段代碼，
如 errorcheck.jsp 中所示，但程序太長(zhǎng)，還是費(fèi)了我不少時(shí)間來(lái)改寫(xiě)。
主程序是名為 ErrorCheck.java ，有了這個(gè) ErrorCheck 的 Bean，我們就再也不用為了表單校驗(yàn)去
寫(xiě)那一大堆煩人的 JavaScript 代碼了。ErrorCheck 類已幫我們生成了幾乎所有你將會(huì)用到的校驗(yàn)方法，
如是否為數(shù)字，長(zhǎng)度的校驗(yàn)，是否為合法email等，你只需在 jsp 頁(yè)面里調(diào)用相應(yīng)的函數(shù)就可以了。
目前一共有七個(gè)函數(shù)：
一 檢測(cè)是否為數(shù)字
//輸入輸入框名和錯(cuò)誤提示信息
numericCheck(String inputName,String errorMsg);
二 檢測(cè)email是否合法
//輸入輸入框名和錯(cuò)誤提示信息
emailCheck(String inputName,String errorMsg);
三 檢測(cè)電話號(hào)碼是否合法
//輸入輸入框名和錯(cuò)誤提示信息
telCheck(String inputName,String errorMsg);
四 檢測(cè)字串長(zhǎng)度是否在規(guī)定范圍那內(nèi)
//輸入輸入框名,錯(cuò)誤提示信息,最小長(zhǎng)度，最大長(zhǎng)度
lengthCheck(String inputName,String errorMsg,int min,int max);
五 檢測(cè)字串中是否不含禁止的字串
//輸入輸入框名,錯(cuò)誤提示信息,禁止字串
denyStrCheck(String inputName,String errorMsg,String str);
六 檢測(cè)字串中是否含給定字串
//輸入輸入框名,錯(cuò)誤提示信息,指定字串
stringCheck(String inputName,String errorMsg,String str);
七 檢測(cè)日期格式是否為 "yyyy-mm-dd"
//輸入輸入框名和錯(cuò)誤提示信息
dateCheck(String inputName,String errorMsg);
只要調(diào)用一下這個(gè)bean，然后用setFromName()設(shè)定你的表單名，再調(diào)用以上函數(shù)，
最后 out.println(yourID.ErrorCheckScript()),就輸出了一段 JavaScript 代碼了，當(dāng)然了，
別忘了這個(gè) <form name=myForm onsubmit="return errorCheck();">
ok,just enjoy it,今天太累，不想多少，有任何意見(jiàn)請(qǐng)寫(xiě)信給我或在我主頁(yè)上留言。
注：我調(diào)試 errorcheck.jsp 的時(shí)候因服務(wù)器的問(wèn)題不知為何不能用 usebean,setProperty 的方法，
只好 new 了一下，我想你們是應(yīng)該可以用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
*
* 這個(gè)類是用來(lái)在客戶端生成 JavaScript 代碼來(lái)校驗(yàn)表單的
* 原是版本是同事 Macro 用 PHP 寫(xiě)的，我感覺(jué)十分好用，再也
* 不用再為那些表單區(qū)寫(xiě)煩人的 javascript 代碼拉，感謝他！
* 這次我用 Java 改寫(xiě)，封裝成一個(gè)類，并修復(fù)了少許的 bug,加
* 多了一條校驗(yàn)的功能,它的擴(kuò)展性很好，以后可能會(huì)繼續(xù)完善。
*
* 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
* 構(gòu)造函數(shù)
\***************************************************************************/
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
* 檢查錄入框值是否是數(shù)字
\***************************************************************************/
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
* 檢查錄入框值的長(zhǎng)度
\***************************************************************************/
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" +
?? 快捷鍵說(shuō)明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號(hào)
Ctrl + =
減小字號(hào)
Ctrl + -