首先有一份XML文件保存每個表單要驗證的選項
接下來在表單頁面中加載這個通用的JS代碼
FormConfig.Xml
-----------------------------------------------
<?xml version="1.0" encoding="gb2312"?>
<root>
<item index="0" fm="fm1" atr0="username" atr1="1" atr2="C" atr3="1" atr4="20"/>
<item index="1" fm="fm1" atr0="title" atr1="1" atr2="C" atr3="1" atr4="50"/>
<item index="2" fm="fm1" atr0="content" atr1="1" atr2="N" atr3="1" atr4="1024"/>
<item index="3" fm="fm1" atr0="addtime" atr1="1" atr2="D" atr3="1" atr4="20"/>
<item index="0" fm="fm2" atr0="username" atr1="1" atr2="C" atr3="1" atr4="20"/>
<item index="1" fm="fm2" atr0="password" atr1="1" atr2="C" atr3="2" atr4="20"/>
</root>
Xml文件說明
Form指定要檢測的表單名
item index為自動編號 art0表單元素名. atr1同名表單項個數(shù) atr2檢測類型(現(xiàn)暫只支持數(shù)字,日期,備注,字符),atr3最小長度(0表示可以不填,對于日期型1表示后臺程序自動處理,不檢測,大于1表示強制用戶輸入) atr4最大長度
示例表單:
----------------------------------------------------------
<form Name=fm2 ID=fm2 method=post>
填寫頁面<BR />
name:<Input jsName=username Name=username MaxLength=20><BR />
pass:<Input jsName=password Name=password MaxLength=20><BR />
<input type=button onclick="check("fm2")" value=' 提 交 '>
</form>
-----------------------------------------------------------
比如上面的表單對應(yīng)了xml中的fm2其中jsName指JS檢測表單項不符要求后提示的名稱.可自定義
通用Js代碼:
----------------------------------------------------------------
function check(fm)
{
var submitIF=CheckItem(fm);
if(submitIF)
{
fmFill.submit();
}
}
function CheckItem(fm)
{
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
xmlDoc.async= false;
xmlDoc.load("tstXml/config.xml");
var root = xmlDoc.selectNodes("http://root/item[@fm=\'" + fm + "\'");
var re = /[0-9]$/;
var tt = true;
var ck = false;
for(i=0;i<root.length;i++)
{
//若項為字符型
if(root.item(i).attributes(3).value.toUpperCase() == "C")
{
//若項必填,且項數(shù)大于1
if(root.item(i).attributes(2).value >1 && root.item(i).attributes(4).value >0)
{
for(k=1;k<=root.item(i).attributes(2).value;k++)
{
ck = ck || document.all.item(root.item(i).attributes(1).value + "_" + k).checked;
}
if(ck == false)
{
alert("你必須從" + k + "個選項中選擇至少一項" + document.all.item(root.item(i).attributes(1).value + "_1").jsName);
return false;
}
}
//若項必填,且項數(shù)=1
if(root.item(i).attributes(4).value > 0 && root.item(i).attributes(2).value == 1)
{
if(document.all.item(root.item(i).attributes(1).value).value.length<root.item(i).attributes(4).value || document.all.item(root.item(i).attributes(1).value).value.length>root.item(i).attributes(5).value)
{
alert("項" + document.all.item(root.item(i).attributes(1).value).jsName + "必填 最小長度不能小于" + root.item(i).attributes(4).value + " 且最大長度不能大于" +root.item(i).attributes(5).value);
return false;
}
}
//若項為選填只需檢測最大長度是否超過設(shè)定
if(root.item(i).attributes(4).value = 0)
{
if(document.all.item(root.item(i).attributes(1).value).value.length>root.item(i).attributes(5).value)
{
alert("項" + document.all.item(root.item(i).attributes(1).value).jsName + " 最大長度不能大于" +root.item(i).attributes(5).value);
return false;
}
}
}
//若項為備注型
if(root.item(i).attributes(3).value.toUpperCase() == "N")
{
//若項必填
if(root.item(i).attributes(4).value > 0 && root.item(i).attributes(2).value == 1)
{
if(document.all.item(root.item(i).attributes(1).value).value.length<root.item(i).attributes(4).value || document.all.item(root.item(i).attributes(1).value).value.length>root.item(i).attributes(5).value)
{
alert("項" + document.all.item(root.item(i).attributes(1).value).jsName + "必填 最小長度不能小于" + root.item(i).attributes(4).value + " 且最大長度不能大于" +root.item(i).attributes(5).value);
return false;
}
}
//若項為選填只需檢測最大長度是否超過設(shè)定
if(root.item(i).attributes(4).value = 0)
{
if(document.all.item(root.item(i).attributes(1).value).value.length>root.item(i).attributes(5).value)
{
alert("項" + document.all.item(root.item(i).attributes(1).value).jsName + " 最大長度不能大于" +root.item(i).attributes(5).value);
return false;
}
}
}
//若項類型為日期
if(root.item(i).attributes(3).value.toUpperCase() == "D")
{
//若項必填,且項數(shù)大于1
if(root.item(i).attributes(2).value > 1 && root.item(i).attributes(4).value > 1)
{
for(k=1;k<=root.item(i).attributes(2).value;k++)
{
ck = ck || document.all.item(root.item(i).attributes(1).value + "_" + k).checked;
}
if(ck == false)
{
alert("你必須從" + k + "個選項中選擇至少一項" + document.all.item(root.item(i).attributes(1).value + "_1").jsName);
return false;
}
}
//若項必填,且項數(shù)=1
if(root.item(i).attributes(4).value > 1 && root.item(i).attributes(2).value == 1)
{
if(document.all.item(root.item(i).attributes(1).value).value.length<root.item(i).attributes(4).value || document.all.item(root.item(i).attributes(1).value).value.length>root.item(i).attributes(5).value)
{
alert("項" + document.all.item(root.item(i).attributes(1).value).jsName + "必填 最小長度不能小于" + root.item(i).attributes(4).value + " 且最大長度不能大于" +root.item(i).attributes(5).value);
return false;
}
}
}
//若項類型為數(shù)字
if(root.item(i).attributes(3).value.toUpperCase() == "I")
{
//若項必填,且項數(shù)大于1
if(root.item(i).attributes(2).value > 1 && root.item(i).attributes(4).value > 0)
{
for(k=1;k<=root.item(i).attributes(2).value;k++)
{
ck = ck || document.all.item(root.item(i).attributes(1).value + "_" + k).checked;
tt = tt && re.test(document.all.item(root.item(i).attributes(1).value + "_" + k).value);
if(tt == false)
{
alert(document.all.item(root.item(i).attributes(1).value + "_1").jsName + "選項中第" + k + "項值只能為數(shù)值!");
return false;
}
}
if(ck == false)
{
alert("你必須從" + k + "個選項中選擇至少一項" + document.all.item(root.item(i).attributes(1).value + "_1").jsName);
return false;
}
}
//若項必填,且項數(shù)=1
if(root.item(i).attributes(4).value > 0 && root.item(i).attributes(2).value == 1)
{
if(re.test(document.all.item(root.item(i).attributes(1).value).value) == false || document.all.item(root.item(i).attributes(1).value).value=="")
{
alert("項" + document.all.item(root.item(i).attributes(1).value).jsName + "只能為數(shù)值");
return false;
}
}
//若為非必填項
if(root.item(i).attributes(4).value == 0 && document.all.item(root.item(i).attributes(1).value).value.length !=0 && re.test(document.all.item(root.item(i).attributes(1).value).value) == false)
{
alert("項" + document.all.item(root.item(i).attributes(1).value).jsName + "可以不填,若要填定必須為數(shù)值!");
return false;
}
}
}
root = "";
xmlDoc = "";
return true;
}
|
