日本一区二区成人在线,色老汉av一区二区三区,99久久精品国产毛片

表單驗證方式的通用化

此文是“Web頁面表單域驗證方式的改進”的續篇。

在上一篇“Web頁面表單域驗證方式的改進“中，我們通過把驗證法則（正則表達式和是否必填字段）寫在表單域中，將驗證過程和驗證法則成功的分離，從而減少了重復代碼，使驗證變得簡單易行，在實際使用中，我們可以把驗證過程放在一個JS文件中，對于全輸入驗證界面，在頁面的表單驗證部分只需要調用其中的checkForm函數就能進行有效驗證，頁面上不再需要書寫重復性高的JS驗證代碼；對于復雜的表單，比如其中含有復選框或是需要兩個文本框比較的地方，這種方法也可讓你不寫通用驗證代碼而把主要精力放在特殊的驗證上。這些能減輕不少工作量，讓繁瑣的工作變得輕松愉快起來。

下面我們看一看這種用法的實際使用。

首先，我們可以把驗證過程放在一個JS文件中，具體代碼如下：
formchecker.js

/**

* Check form

function checkForm(vform){

for(var i=0;i<vform.elements.length;i++){

if(vform.elements[i].type=="text"){

var checkResult=checkTextBox(vform.elements[i]);

var name=vform.elements[i].getAttribute("name");

if(checkResult){

document.getElementById(name+"Msg").className="feedbackHide";

}

else{

document.getElementById(name+"Msg").className="feedbackShow";

vform.elements[i].focus();

return false;

}

return true;

}

/**

* Check text field in the form

function checkTextBox(vTextBox){

var validChar=vTextBox.getAttribute("validChar");

var isRequired=vTextBox.getAttribute("isRequired");

var inputValue=vTextBox.value;

if(isRequired!="true" && inputValue.length<1){

return true;

}

else{

var regexStr="^"+validChar+"$";

var regex=new RegExp(regexStr);

return regex.test(inputValue);

}

/**

* Remove Extra Char in textbox

function removeExtraChar(vTextBox,event){

var maxlength=parseInt(vTextBox.getAttribute("maxlength"));

var inputValue=vTextBox.value;

if(inputValue.length>=maxlength){

event.keyCode=9;

}

下面想驗證一個用戶登錄頁面，它的頁面部分代碼如下：

<%@ page contentType="text/html; charset=UTF-8" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>"我的事務備忘錄"用戶登錄頁面</title>

type="text/css" />

</head>

<body>

String msg = (String) request.getAttribute("Msg");

if (msg != null) {

out.print(msg);

}

</tr>

<tbody>

<tr>

<td>

<input type="text"

name="userName"

validChar="[\u4E00-\u9FA5]{2,3}"

isRequired="true"

maxlength="8"

onkeydown="removeExtraChar(this,event)"

onfocus="this.style.backgroundColor='#e6e6e6'"

onblur="this.style.backgroundColor='#ffffff'"/>

<span id="userNameMsg" class="feedbackHide">用戶名必須輸入兩到三位漢字</span>

</td>

</tr>

<tr>

<td>

<input type="text"

name="userPswd"

validChar="\w+"

isRequired="true"

maxlength="8"

onkeydown="removeExtraChar(this,event)"

onfocus="this.style.backgroundColor='#e6e6e6'"

onblur="this.style.backgroundColor='#ffffff'"/>

<span id="userPswdMsg" class="feedbackHide">密碼必須輸入英語或數字</span>

</td>

</tr>

<tr>

</tr>

<tr>

<td colspan="2" align="center">如果沒有用戶請點擊這里<a href='ShowPage?page=register'>注冊</a></td>

</tr>

</tbody>

</table>

</form>

</td>

</tr>

</table>

<div>

</body>

</html>

請注意其中沒有任何頁面驗證的JS代碼，只有在表單驗證的地方調用formchecker.js中的函數。

不需要寫JS代碼，只需要引入formchecker.js，就實現了表單的驗證，下面是驗證效果之一：

對于復雜一些的頁面，在formchecker.js的幫助下也能有效減少驗證代碼量，你只要書寫一些特殊的通過validchar不能驗證的代碼即可，比如說如下注冊頁面：

你只要書寫兩次密碼比較的JS代碼，其它的還是可以讓checkForm函數幫你完成。具體代碼如下：

<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>"我的事務備忘錄"用戶注冊頁面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="web/js/ajax.js" type="text/javascript"></script>
<script src="web/js/formchecker.js" type="text/javascript"></script>
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
<div>
<%
    String msg = (String) request.getAttribute("Msg");
    if (msg != null) {
        out.print(msg);
    }
%>
    
    <table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; boder_top: 0px" bordercolor="#236d78" cellspacing="0" cellpadding="0" width="530" align="center" border="0">
        <tr bgcolor="#eaecf5" height="25">
        <td colspan=3> <font face=webdings color=#ff8c00>8</font><b> 注冊個人用戶</b></td>
        </tr>
        <tr bgcolor=#236d78 height=1><td></td></tr>
        <tr bgcolor=#eaecf5 >
        <td bgcolor=#ffffff>
          
          <form action="UserRegister" onsubmit="return check(this);">
          <table width=460 align=center border=0>
            <tbody>
              <tr>
                <td width=70>用戶名:</td>
                <td>
                    <input type="text"
                           name="userName"
                           validChar="[\u4E00-\u9FA5]{2,3}"
                           isRequired="true"
                           onfocus="this.style.backgroundColor='#e6e6e6'"
                           onblur="this.style.backgroundColor='#ffffff'"/>
                    <font color=red> (必填)</font>
                    <span id="userNameMsg" class="feedbackHide">用戶名必須輸入兩到三位漢字</span>
                </td>
              </tr>
              <tr>
                <td width=70>密碼:</td>
                <td>
                    <input type="text"
                           name="userPswd"
                           validChar="\w+"
                           isRequired="true"
                           onfocus="this.style.backgroundColor='#e6e6e6'"
                           onblur="this.style.backgroundColor='#ffffff'"/>
                    <font color=red> (必填)</font>
                    <span id="userPswdMsg" class="feedbackHide">密碼必須輸入英語或數字</span>
                </td>
              </tr>
              <tr>
                <td width=70>再次輸入密碼:</td>
                <td>
                    <input type="text"
                           name="userPswd2"
                           validChar="\w+"
                           isRequired="true"
                           onfocus="this.style.backgroundColor='#e6e6e6'"
                           onblur="this.style.backgroundColor='#ffffff'"/>
                    <font color=red> (必填)</font>
                    <span id="userPswd2Msg" class="feedbackHide">密碼必須輸入英語或數字</span>
                </td>
              </tr>
              <tr>
                <td></td>
                <td><input type="submit" value="注冊"/></td>
              </tr>
            </tbody>
          </table>
          </form>
          
        </td>
      </tr>
    </table>
    
<div>
</body>
</html>

<script LANGUAGE="JavaScript">

</script>

注意看上面的js代碼比常規方案減少了多少。

如果頁面上有其它控件如復選框，列表框等也可照此辦理，把文本框的通用驗證交給formchecker.js的checkForm和checkTextBox進行，在頁面的js代碼中只寫特殊的處理，這樣能減輕不少工作量，讓繁瑣的工作變得輕松愉快起來。

posted on 2008-04-07 21:41 sitinspring 閱讀(2342) 評論(7) 編輯收藏所屬分類: Web開發、JavaScript


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 表單的設計淺談分頁技術及其實現 Web頁面表單域驗證方式在Struts1.3.8中的使用按鈕按下效果的左側導航欄實現通用化Web表單驗證方式的改進方案使用commons-fileupload實現單個和多個文件上傳 JFreeChat四種圖表的繪制例程表單驗證方式的通用化 Web頁面表單域驗證方式的改進使用DOM操作表格

# re: 表單驗證方式的通用化 2008-04-07 23:11 王能

# re: 表單驗證方式的通用化 2008-04-08 13:52 BeanSoft

# re: 表單驗證方式的通用化 2008-04-08 21:49 如坐春風

# re: 表單驗證方式的通用化 2008-04-09 12:51 javaest

# re: 表單驗證方式的通用化 2008-04-10 08:37 如坐春風

# re: 表單驗證方式的通用化 2008-05-08 10:11 龍震

# re: 表單驗證方式的通用化 2008-05-08 11:30 如坐春風

春風博客

導航

統計

公告

常用鏈接

留言簿(11)

隨筆分類(224)

隨筆檔案(126)

個人軟件下載

我的其它博客

我的鄰居們

最新隨筆

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜

表單驗證方式的通用化

評論