用Javascript校驗(yàn)客戶端數(shù)據(jù)

作者： 雨亦奇

一、準(zhǔn)確獲取文本框數(shù)據(jù)的字節(jié)長度

也許你要問，在javascript中，利用form.textfield.value.length就可以得到form表單的textfield文本框中輸入數(shù)據(jù)的長度了，難道這個長度不是以字節(jié)計的嗎？

在詳細(xì)說明之前，讀者不妨先測試如下網(wǎng)頁：

content="text/html; charset=gb2312">

測試的結(jié)果如下：

怎么樣？“china中國”的長度是7，而不是9（按字節(jié)算的話，它的長度應(yīng)該是9）。為什么會這樣？答案是這個長度是以Unicode字符計的長度，一個英文字母是一個Unicode字符，一個漢字也是一個Unicode字符。

實(shí)際上我們經(jīng)常用的并不是這個長度，而是以字節(jié)為單位計算的長度。在B/S開發(fā)中，我們所用的后臺數(shù)據(jù)庫，其字段寬度就是以節(jié)字計算的。以字節(jié)為單位時，一個英文字母是一個字節(jié)，而一個漢字則是兩個字節(jié)了，二者長度不一樣。

由于數(shù)據(jù)校驗(yàn)不宜在數(shù)據(jù)庫服務(wù)器端進(jìn)行（這樣做效率很低），所以在客戶端（瀏覽器端）進(jìn)行數(shù)據(jù)校驗(yàn)時，就必須以字節(jié)為單位，以避免輸入的數(shù)據(jù)超出字段寬度。為此，必須能獲取輸入數(shù)據(jù)的準(zhǔn)確的字節(jié)長度。

筆者經(jīng)過一番研究，寫了如下javascript函數(shù)：

function strlen(str)
{
var len;
var i;
len = 0;
for (i=0;i{
if (str.charCodeAt(i)>255) len+=2; else len++;
}
return len;
}

在這個javascript腳本中，strlen函數(shù)逐個取str字符串中的Unicode字符，利用charCodeAt獲取指定位置的字符的值（為數(shù)字形式，可和數(shù)字進(jìn)行比較），因?yàn)橛⑽淖址闹悼傇?到255之間，所以我們可以認(rèn)定，如果該值大于255，就表示是漢字，長度加2，否則長度加1，這樣最終可得到這個字符串以字節(jié)計的長度，滿足了我們的要求。

下面是將原取字符串長度的函數(shù)strlen替換為新的strlen后的結(jié)果：

二、客戶端數(shù)據(jù)校驗(yàn)的通用解決之道----妙用自定義屬性

我們知道，HTML的文本框元素可以使用type,name,value,size,maxlength,style,id等固有屬性，但你可曾想到，我們還可以自定義一些屬性呢。筆者是在一個極其偶然的機(jī)會里發(fā)現(xiàn)這個小秘密的，并且沒有想到的是，這個小秘密竟然可以幫我們很大的忙----實(shí)現(xiàn)客戶端數(shù)據(jù)的通用校驗(yàn)，自此客戶端校驗(yàn)工作容易做了，不用再為每個FORM表單勞神又費(fèi)力地寫javascript校驗(yàn)代碼了。

請看下面的測試網(wǎng)頁univerify_test.html：

onsubmit="return verifyAll(form1);">

cellPadding="1" cellSpacing="0" width="580">

	姓名:	size="10" maxlength="10" maxsize="10" nullable="no" datatype="text" onBlur="verifyInput(this);"> *
	年齡：	size="3" maxlength="3" maxsize="3" nullable="no" datatype="number" onBlur="verifyInput(this);"> *
	住址：	size="40" maxlength="100" maxsize="100" nullable="yes" datatype="text" onBlur="verifyInput(this);">
name="Button" value="檢測全部輸入并提交" >

1、chname：表示該數(shù)據(jù)的中文名稱，用于校驗(yàn)出錯時顯示用。

2、maxsize：表示允許輸入的最大長度，這個長度是以節(jié)字計算的。

3、nullable：表示輸入值是否允許為空。為yes時允許為空。

4、datatype：表示輸入值的數(shù)據(jù)類型。這個數(shù)據(jù)類型用戶可以根據(jù)需要自行定義，需要注意的是，對于每一個新的數(shù)據(jù)類型，均需要在下面將要講述的javascript文件univerify.js中添加相應(yīng)的校驗(yàn)函數(shù)，從而實(shí)現(xiàn)統(tǒng)一校驗(yàn)。

三個文本框都對失去焦點(diǎn)事件進(jìn)行捕獲：onBlur="verifyInput(this);"。在失去焦點(diǎn)時用verifyInput校驗(yàn)一下此文本框的值是否合法。

form1表單對onsubmit事件進(jìn)行了捕獲：onsubmit="return verifyAll(this);"。在用戶提交表單時，用verifyAll對此表單的元素的值統(tǒng)一進(jìn)行檢測，驗(yàn)證其合法性，保證存入數(shù)據(jù)庫時不出現(xiàn)異常。

上述網(wǎng)頁引用的javascript函數(shù)庫univerify.js內(nèi)容如下：

/******************************************************/
/* 文件名：univerify.js */
/* 功 能：基于自定義屬性的統(tǒng)一檢測用javascript函數(shù)庫 */
/* 作 者：縱橫軟件制作中心雨亦奇(zhsoft88@sohu.com) */
/******************************************************/
/* 取得字符串的字節(jié)長度 */
function strlen(str)
{var i;
var len;
len = 0;
for (i=0;i{
if (str.charCodeAt(i)>255) len+=2; else len++;
}
return len;
}
/* 檢測字符串是否為空 */
function isnull(str)
{
var i;
for (i=0;i{
if (str.charAt(i)!=' ') return false;
}
return true;
}
/* 檢測字符串是否全為數(shù)字 */
function isnumber(str)
{
var number_chars = "1234567890";
var i;
for (i=0;i{
if (number_chars.indexOf(str.charAt(i))==-1) return false;
}
return true;
}
/* 檢測指定文本框輸入是否合法 */
function verifyInput(input)
{
var image;
var i;
var error = false;
/* 長度校驗(yàn) */
if (strlen(input.value)>parseInt(input.maxsize))
{
alert(input.chname+"超出最大長度"+input.maxsize);
error = true;
}
else
/* 非空校驗(yàn) */
if (input.nullable=="no"&&isnull(input.value))
{
alert(input.chname+"不能為空");
error = true;
}
else
{
/* 數(shù)據(jù)類型校驗(yàn) */
switch(input.datatype)
{
case "number": if (isnumber(input.value)==false)
{
alert(input.chname+"值應(yīng)該全為數(shù)字");
error = true;
}
break;
/* 在這里可以添加多個自定義數(shù)據(jù)類型的校驗(yàn)判斷 */
/* case datatype1: ... ; break; */
/* case datatype2: ... ; break; */
/* ....................................*/
default : break;
}
}
/* 根據(jù)有無錯誤設(shè)置或取消警示標(biāo)志 */
if (error)
{
image = document.getElementById("img_"+input.name);
image.src="img/warning.gif";
return false;
}
else
{
image = document.getElementById("img_"+input.name);
image.src="http://blog.itpub.net/63654/viewspace-900126/img/space.gif";
return true;
}
}
/* 檢測指定FORM表單所有應(yīng)被檢測的元素
（那些具有自定義屬性的元素）是否合法，此函數(shù)用于表單的onsubmit事件 */
function verifyAll(myform)
{
var i;
for (i=0;i{
/* 非自定義屬性的元素不予理睬 */
if (myform.elements[i].chname+""=="undefined") continue;
/* 校驗(yàn)當(dāng)前元素 */
if (verifyInput(myform.elements[i])==false)
{
myform.elements[i].focus();
return false;
}
}
return true;
}

在univerify.js中，verifyAll用來校驗(yàn)指定表單的數(shù)據(jù)，它是逐個提取表單中的元素的，不用特別指定表單元素的名字，所以具有通用性。verifyInput是用來實(shí)際執(zhí)行數(shù)據(jù)校驗(yàn)的函數(shù)，如果有新的數(shù)據(jù)類型datatype需要檢測，用戶可在此函數(shù)中添加，可擴(kuò)充性好。

下面是瀏覽univerify_test.html網(wǎng)頁的畫面：

使用基于自定義屬性的客戶端統(tǒng)一檢測方法，需要做的工作很簡單：

1、在網(wǎng)頁文件中嵌入統(tǒng)一檢測用javascript函數(shù)庫：

2、對所用表單添加onsubmit事件處理程序：onsubmit="return verifyAll(this);"。其中的this指定為當(dāng)前表單對象，勿需提供表單具體名字,極具通用性。

3、對每個需要檢測的文本框添加chname,maxsize,nullable和datatype四個自定義屬性。如果想在文本框失去焦點(diǎn)時對數(shù)據(jù)進(jìn)行一下校驗(yàn)，請?zhí)砑邮录幚沓绦颍簅nBlur="verifyInput(this);"。

怎么樣？使用基于自定義屬性的客戶端統(tǒng)一檢測方法后，不用再為每個表單寫類似的檢測代碼了吧，統(tǒng)一檢測足夠了。

小結(jié)：自定義屬性是非常有用的屬性，基于自定義屬性的客戶端數(shù)據(jù)統(tǒng)一檢測方法，在B/S開發(fā)中極其有用，使用方便，可擴(kuò)充性強(qiáng)。相信讀者經(jīng)過實(shí)踐，自能體會到個中妙處。