對我而言，不是自己的發現或發明，介紹給別人的時候總有些心虛。對於使用自定義html標籤實現客戶端校驗方法的啓發來自雨亦奇的文章，我僅僅是和同事在實際的開發過程中加以使用並作了一定總結。
使用html自定義標籤的方式的確是解決客戶端校驗的高招。具體的做法如下，我們仍然使用我們有關用戶名、密碼的例子，這是我們這是使用標籤前的user.html文件：
<html>
<head>
<title>html標籤測試</title>
</head>
<body>
<form name="checkForm">
用戶名<input type="text" name="User_id" ><br>
密碼<input type="password" name="Password"><br>
<input type="button" name="checkButton" value="確定" >
</form>
</body>
</html>
作如下處理：
|
標籤名稱
|
使用說明
|
|
chname
|
表示數據項的中文名稱，校驗出錯使用。
|
|
maxlength
|
表示數據項的最大長達，該長度以字節計算
|
|
datatype
|
表示數據項的數據類型，這個數據類型用戶可以根據需要自己定義。對於新的數據類型必須要在文件verify.js中進行配置。
|
|
nullable
|
是否爲空，爲空，其值爲yes。
|
這是要使用的verify.js的源代碼：
|
函數名稱
|
具體實現代碼
|
|
取得字符串的字節長度
|
function strlen(str)
{
var i;
var len;
len = 0;
for (i=0;i<str.length;i++)
{
if (str.charCodeAt(i)>255) len+=2; else len++;
}
return len;
}
|
|
檢測字符串是否爲空
|
function isnumber(str)
{
var number_chars = "1234567890";
var i;
for (i=0;i<str.length;i++)
{
if (number_chars.indexOf(str.charAt(i))==-1) return false;
}
return true;
}
|
|
檢測字符串是否全爲數字
|
function isnumber(str)
{
var number_chars = "1234567890";
var i;
for (i=0;i<str.length;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="img/space.gif";
return true;
}
}
|
|
檢測指定Form表單所有應被檢測的元素
（那些具有自定義屬性的元素）是否合法，此函數用於表單的onsubmit事件
|
function verifyAll(myform)
{
var i;
for (i=0;i<myform.elements.length;i++)
{
/* 非自定義屬性的元素不予理睬 */
if (myform.elements[i].chname+""=="undefined") continue;
/* 校驗當前元素 */
if (verifyInput(myform.elements[i])==false)
{
myform.elements[i].focus();
return false;
}
}
return true;
}
|
這裏是使用標籤後的html:
<html>
<head>
<title>html標籤測試</title>
</head>
<script language="javascript" src="verify.js"></script>
<body>
<form name="checkForm" method="post" action="return verifyAll(checkForm)">
用戶名<input type="text" name="User_id" chname="用戶名" nullable="no" maxlength="12" datatype="text" onBular="verifyInput(this)"><br>
密碼<input type="password" name="Password" chname="密碼" nullable="no" maxlength="10" datatype="text" onBular="verifyInput(this)"><br>
<input type="submit" name="checkButton" value="確定">
</form>
</body>
</html>
verifyInput（）方法主要是做丟失焦點後的校驗；
verifyAll()方法使用submit方式提交對錶單元素作相應的校驗。
如需其他校驗，請您增加相應的函數至verfiy.js文件中，然後增加相應的標籤、即可使用如檢驗密碼的長度在3-12位，增加標籤如下：
|
標籤名稱
|
使用說明
|
|
minlength
|
表示輸入數據的最小長度限制。
|
增加校驗函數isValideSize()：
|
函數名稱
|
具體實現代碼
|
|
判斷所取得的對象是否合法
|
function isValideSize(input){
var maxLength = parseInt(input.maxlength);
var minLength = parseInt(input.minlength);
var currentLength = input.length;
var chname = input.chname;
if(currentLength <= maxLength || currentLength >= minLength){
return true;
}else{
alert(chname + “應在”+_minLength+“和”+ maxLength +“之間！”)
input.focus();
return false;
}
}
|
具體使用如下：
<input type="password" name="Password" chname="密碼" noable="no" maxlength="10" minlength = “3” datatype="text" onBular="verifyInput(this)&& isValideSize(this) ">
小結：
有關Javascript的諸多使用技巧本文列舉了四種方式：基於項目原有代碼的、重構後的、JsValidation框架、自定義html標籤的。解決方式不同，但其核心思想都是在爭對校驗這一中心目標進行相應的結構性調整，使其更易於客戶端程序員使用、使得開發過程更加清晰、簡明。總之化繁爲簡就是硬道理!