作者： 雨亦奇

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

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

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

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

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

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

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

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

筆者經(jīng)過(guò)一番研究，寫了如下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;
}

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

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

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

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

請(qǐng)看下面的測(cè)試網(wǎng)頁(yè)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="檢測(cè)全部輸入并提交">

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

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

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

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

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

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

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

/******************************************************/
/* 文件名：univerify.js */
/* 功 能：基于自定義屬性的統(tǒng)一檢測(cè)用javascript函數(shù)庫(kù) */
/* 作 者：縱橫軟件制作中心雨亦奇(zhsoft88@sohu.com) */
/******************************************************/
/* 取得字符串的字節(jié)長(zhǎng)度 */
function strlen(str)
{var i;
var len;
len = 0;
for (i=0;i{
if (str.charCodeAt(i)>255) len+=2; else len++;
}
return len;
}
/* 檢測(cè)字符串是否為空 */
function isnull(str)
{
var i;
for (i=0;i{
if (str.charAt(i)!=' ') return false;
}
return true;
}
/* 檢測(cè)字符串是否全為數(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;
}
/* 檢測(cè)指定文本框輸入是否合法 */
function verifyInput(input)
{
var image;
var i;
var error = false;
/* 長(zhǎng)度校驗(yàn) */
if (strlen(input.value)>parseInt(input.maxsize))
{
alert(input.chname+"超出最大長(zhǎng)度"+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;
/* 在這里可以添加多個(gè)自定義數(shù)據(jù)類型的校驗(yàn)判斷 */
/* case datatype1: ... ; break; */
/* case datatype2: ... ; break; */
/* ....................................*/
default : break;
}
}
/* 根據(jù)有無(wú)錯(cuò)誤設(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;
}
}
/* 檢測(cè)指定FORM表單所有應(yīng)被檢測(cè)的元素
（那些具有自定義屬性的元素）是否合法，此函數(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用來(lái)校驗(yàn)指定表單的數(shù)據(jù)，它是逐個(gè)提取表單中的元素的，不用特別指定表單元素的名字，所以具有通用性。verifyInput是用來(lái)實(shí)際執(zhí)行數(shù)據(jù)校驗(yàn)的函數(shù)，如果有新的數(shù)據(jù)類型datatype需要檢測(cè)，用戶可在此函數(shù)中添加，可擴(kuò)充性好。

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

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

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

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

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

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

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