首先有一份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同名表单项个数 atr2检测类型(现暂只支持数字,日期,备注,字符),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> -----------------------------------------------------------
比如上面的表单对应了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("//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") { //若项必填,且项数大于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; } } //若项必填,且项数=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; } } //若项为选填只需检测最大长度是否超过设定 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; } } //若项为选填只需检测最大长度是否超过设定 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") { //若项必填,且项数大于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; } } //若项必填,且项数=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; } } } //若项类型为数字 if(root.item(i).attributes(3).value.toUpperCase() == "I") { //若项必填,且项数大于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 + "项值只能为数值!"); return false; } } if(ck == false) { alert("你必须从" + k + "个选项中选择至少一项" + document.all.item(root.item(i).attributes(1).value + "_1").jsName); return false; } } //若项必填,且项数=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 + "只能为数值"); 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 + "可以不填,若要填定必须为数值!"); return false; } } } root = ""; xmlDoc = ""; return true; }
|