作者： 雨亦奇

一、準確獲取文本框數據的字節長度

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

在詳細說明之前，讀者不妨先測試如下網頁：

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

測試的結果如下：

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

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

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

筆者經過一番研究，寫了如下javascript函數：

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函數逐個取str字符串中的Unicode字符，利用charCodeAt獲取指定位置的字符的值（為數字形式，可和數字進行比較），因為英文字符的值總在0到255之間，所以我們可以認定，如果該值大于255，就表示是漢字，長度加2，否則長度加1，這樣最終可得到這個字符串以字節計的長度，滿足了我們的要求。

下面是將原取字符串長度的函數strlen替換為新的strlen后的結果：

二、客戶端數據校驗的通用解決之道----妙用自定義屬性

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

請看下面的測試網頁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：表示該數據的中文名稱，用于校驗出錯時顯示用。

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

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

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

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

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

上述網頁引用的javascript函數庫univerify.js內容如下：

/******************************************************/
/* 文件名：univerify.js */
/* 功 能：基于自定義屬性的統一檢測用javascript函數庫 */
/* 作 者：縱橫軟件制作中心雨亦奇(zhsoft88@sohu.com) */
/******************************************************/
/* 取得字符串的字節長度 */
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;
}
/* 檢測字符串是否全為數字 */
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;
/* 長度校驗 */
if (strlen(input.value)>parseInt(input.maxsize))
{
alert(input.chname+"超出最大長度"+input.maxsize);
error = true;
}
else
/* 非空校驗 */
if (input.nullable=="no"&&isnull(input.value))
{
alert(input.chname+"不能為空");
error = true;
}
else
{
/* 數據類型校驗 */
switch(input.datatype)
{
case "number": if (isnumber(input.value)==false)
{
alert(input.chname+"值應該全為數字");
error = true;
}
break;
/* 在這里可以添加多個自定義數據類型的校驗判斷 */
/* case datatype1: ... ; break; */
/* case datatype2: ... ; break; */
/* ....................................*/
default : break;
}
}
/* 根據有無錯誤設置或取消警示標志 */
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表單所有應被檢測的元素
（那些具有自定義屬性的元素）是否合法，此函數用于表單的onsubmit事件 */
function verifyAll(myform)
{
var i;
for (i=0;i{
/* 非自定義屬性的元素不予理睬 */
if (myform.elements[i].chname+""=="undefined") continue;
/* 校驗當前元素 */
if (verifyInput(myform.elements[i])==false)
{
myform.elements[i].focus();
return false;
}
}
return true;
}

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

下面是瀏覽univerify_test.html網頁的畫面：

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

1、在網頁文件中嵌入統一檢測用javascript函數庫：

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

3、對每個需要檢測的文本框添加chname,maxsize,nullable和datatype四個自定義屬性。如果想在文本框失去焦點時對數據進行一下校驗，請添加事件處理程序：onBlur="verifyInput(this);"。

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

小結：自定義屬性是非常有用的屬性，基于自定義屬性的客戶端數據統一檢測方法，在B/S開發中極其有用，使用方便，可擴充性強。相信讀者經過實踐，自能體會到個中妙處。