亚洲精品国产免费,国产成人亚洲综合色影视,亚洲日本乱码一区二区在线二产线

表單驗(yàn)證方式的通用化

此文是“Web頁(yè)面表單域驗(yàn)證方式的改進(jìn)”的續(xù)篇。

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

下面我們看一看這種用法的實(shí)際使用。

首先，我們可以把驗(yàn)證過(guò)程放在一個(gè)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;

}

下面想驗(yàn)證一個(gè)用戶登錄頁(yè)面，它的頁(yè)面部分代碼如下：

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

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

<html>

<head>

<title>"我的事務(wù)備忘錄"用戶登錄頁(yè)面</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">密碼必須輸入英語(yǔ)或數(shù)字</span>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</form>

</td>

</tr>

</table>

<div>

</body>

</html>

請(qǐng)注意其中沒(méi)有任何頁(yè)面驗(yàn)證的JS代碼，只有在表單驗(yàn)證的地方調(diào)用formchecker.js中的函數(shù)。

不需要寫(xiě)JS代碼，只需要引入formchecker.js，就實(shí)現(xiàn)了表單的驗(yàn)證，下面是驗(yàn)證效果之一：

對(duì)于復(fù)雜一些的頁(yè)面，在formchecker.js的幫助下也能有效減少驗(yàn)證代碼量，你只要書(shū)寫(xiě)一些特殊的通過(guò)validchar不能驗(yàn)證的代碼即可，比如說(shuō)如下注冊(cè)頁(yè)面：

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

<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>"我的事務(wù)備忘錄"用戶注冊(cè)頁(yè)面</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> 注冊(cè)個(gè)人用戶</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">密碼必須輸入英語(yǔ)或數(shù)字</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">密碼必須輸入英語(yǔ)或數(shù)字</span>
                </td>
              </tr>
              <tr>
                <td></td>
                <td><input type="submit" value="注冊(cè)"/></td>
              </tr>
            </tbody>
          </table>
          </form>
          
        </td>
      </tr>
    </table>
    
<div>
</body>
</html>

<script LANGUAGE="JavaScript">

</script>

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

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

posted on 2008-04-07 21:41 sitinspring 閱讀(2335) 評(píng)論(7) 編輯收藏所屬分類: Web開(kāi)發(fā) 、JavaScript

評(píng)論

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

http://www.bt285.cn 這個(gè)BT網(wǎng)站,與http://yaonba.com.cn NBA中文網(wǎng)
表單也是用這個(gè)的說(shuō). 回復(fù) 更多評(píng)論

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

建議看看 EasyValidation 思路差不多，不過(guò)貌似它們做的更模塊化一些，呵呵。回復(fù) 更多評(píng)論

# re: 表單驗(yàn)證方式的通用化 2008-04-08 21:49 如坐春風(fēng)

@BeanSoft

你推薦的EasyValidation很有參考價(jià)值，應(yīng)該從其中汲取營(yíng)養(yǎng)。謝謝推薦。回復(fù) 更多評(píng)論

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

我在考慮通過(guò)對(duì)JAVA對(duì)象的標(biāo)注，生成前端JS的驗(yàn)證代碼，同時(shí)服務(wù)器端也可以通過(guò)標(biāo)注去驗(yàn)證CLICENT端傳來(lái)的數(shù)據(jù)是否正確，這樣，兩個(gè)數(shù)據(jù)層面的驗(yàn)證得到了統(tǒng)一和極大的簡(jiǎn)化回復(fù) 更多評(píng)論

# re: 表單驗(yàn)證方式的通用化 2008-04-10 08:37 如坐春風(fēng)

@javaest

是否類似Struts的Validator的做法? 回復(fù) 更多評(píng)論

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

<input />元素增加很多冗余的屬性，W3C validation 無(wú)法通過(guò)，我不知道作者是否關(guān)注這方面的問(wèn)題？賜教！回復(fù) 更多評(píng)論

# re: 表單驗(yàn)證方式的通用化 2008-05-08 11:30 如坐春風(fēng)

@龍震

客氣了!

驗(yàn)證的方便性和標(biāo)準(zhǔn)化確實(shí)不能兼顧,為方便性考慮只能先顧一頭了.沒(méi)有辦法. 回復(fù) 更多評(píng)論

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




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

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

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

# re: 表單驗(yàn)證方式的通用化 2008-04-08 21:49 如坐春風(fēng)

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

# re: 表單驗(yàn)證方式的通用化 2008-04-10 08:37 如坐春風(fēng)

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

# re: 表單驗(yàn)證方式的通用化 2008-05-08 11:30 如坐春風(fēng)

春風(fēng)博客

導(dǎo)航

統(tǒng)計(jì)

公告

常用鏈接

留言簿(11)

隨筆分類(224)

隨筆檔案(126)

個(gè)人軟件下載

我的其它博客

我的鄰居們

最新隨筆

搜索

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜

表單驗(yàn)證方式的通用化

評(píng)論