**********clientvalidator.js************
//*************************************验正类定义**********************************************
function valControlSec(id,regExp,info,errInfo,sucInfo)
{
this.validated = 0;
this.id = id?id:"";
this.regExp = regExp?regExp:"";
this.info = info?info:"";
this.errInfo = errInfo?errInfo:"";
this.sucInfo = sucInfo?sucInfo:"";
this.normalColor = "";
this.rightColor = "";
this.wrongColor = "";
this.index = -1;
this.check = function (){
curObj = event.srcElement;
if (typeof(curObj) != Object)
//alert(this.id);
curObj = document.getElementById(this.id);
info_ctrl = document.getElementById(this.id+"_info");
var curRegExp = new RegExp(this.regExp);
if (curObj.value != "")
if (curObj.value.match(curRegExp))
{
this.validated = 1;
info_ctrl.innerHTML = this.sucInfo;
info_ctrl.style.color = this.rightColor;
}
else
{
this.validated = 0;
info_ctrl.innerHTML = this.errInfo;
info_ctrl.style.color = this.wrongColor;
}
else
{
this.validated = 0;
info_ctrl.innerHTML = this.info;
info_ctrl.style.color = this.normalColor;
}
}
this.setup = function (){
var curControl = document.getElementById(this.id);
curControl.parentElement.innerHTML += "<span id=/""+this.id+"_info/" style=/"font-size:10pt;/">"+this.info+"</span>";
curControl = document.getElementById(this.id);
document.getElementById(this.id+"_info").style.color = this.normalColor;
curControl.attachEvent("onblur",new Function("document.validater.valControlSecs["+this.index+"].check();"));
}
}
function clientValidate()
{
this.email = "^//w{4,12}@//w{1,12}/.[a-zA-Z]{2,3}$";
this.normalColor = "#000000";
this.rightColor = "#00ff00";
this.wrongColor = "#ff0000";
this.info = "Type in some data";
this.errInfo = ":(";
this.sucInfo = "";
this.valControlSecs = new Array();
this.addValControlSec = function (valControlSec){
this.valControlSecs[this.valControlSecs.length] = valControlSec;
valControlSec.index = this.valControlSecs.length - 1 ;
with(valControlSec)
{
if (normalColor == "" || normalColor == null)
normalColor = this.normalColor;
if (rightColor == "" || rightColor == null)
rightColor = this.rightColor;
if (wrongColor == "" || wrongColor == null)
wrongColor = this.wrongColor;
if (errInfo == "" || errInfo == null)
errInfo = this.errInfo;
if (info == "" || info == null)
info = this.info;
if (sucInfo == "" || sucInfo == null)
sucInfo = this.sucInfo;
if (errInfo == this.errInfo && info != this.info)
errInfo = info;
}
}
this.setup = function (){
for(var i=0;i<this.valControlSecs.length;i++)
{
this.valControlSecs[i].setup();
}
document.forms[0].attachEvent("onsubmit",new Function("return myValidater.validated()"));
}
this.validated = function (){
var isVal = true;
var curObj = null;
var info_ctrl = null;
for(var i=0;i<this.valControlSecs.length;i++)
{
this.valControlSecs[i].check();
if(!this.valControlSecs[i].validated)
{
curObj = document.getElementById(this.valControlSecs[i].id);
info_ctrl = document.getElementById(this.valControlSecs[i].id+"_info");
if(curObj.value == "")
{
info_ctrl.innerHTML = this.valControlSecs[i].info;
info_ctrl.style.color = this.valControlSecs[i].wrongColor;
}
isVal = false;
}
}
if (!isVal) alert("表单验证失败,请检查您的输入内容!");
return isVal;
}
}
//*************************************邦定表单************************************************
document.validater = new clientValidate();
var myValidater = document.validater;
with (myValidater)
{
normalColor = "#aaaa00";
rightColor = "#66ff66";
wrongColor = "#ff0066";
}
var curForm =document.forms[0];
var curElement = null;
var myValControlSec = null;
for (var i=0;i<curForm.elements.length;i++)
{
curElement = curForm.elements[i];
if(!curElement.getAttribute("id") && curElement.getAttribute("regExp") != null)
if(curElement.getAttribute("name"))
curElement.setAttribute("id",curElement.getAttribute("name"));
if(curElement.getAttribute("regExp") != null && curElement.getAttribute("id") != null)
{
myValControlSec = new valControlSec();
with (myValControlSec)
{
id = curElement.getAttribute("id"); //表单元素属性
regExp = curElement.getAttribute("regExp"); //表单元素属性
info = curElement.getAttribute("info"); //表单元素属性
errInfo = curElement.getAttribute("errInfo");//表单元素属性
sucInfo = curElement.getAttribute("sucInfo");//表单元素属性
normalColor= curElement.getAttribute("normalColor");
rightColor = curElement.getAttribute("rightColor");
wrongColor = curElement.getAttribute("wrongColor");
}
if (myValControlSec.regExp.substring(0,1) != "^")
myValControlSec.regExp = eval("myValidater."+myValControlSec.regExp);
myValidater.addValControlSec(myValControlSec);
}
}
myValidater.setup(); //执行邦定
************** 用法 *******************
<table width="460" border="0" align="center" cellpadding="4" cellspacing="0" borderColor="#333333" bgcolor="#333333" style="border-collapse: collapse;color:#AC71B3;">
<form action="admin_Login_check.asp" method=post>
<tr>
<th bgcolor="#000000"> </th>
<th bgcolor="#000000" style="text-align:left;">后台管理登陆</th>
</tr>
<tr>
<td height="30" colspan="2" align="right" bgcolor="#000000"><hr size="1" /></td>
</tr>
<tr>
<td width="170" align="right" bgcolor="#000000">用户名:</td>
<td nowrap="nowrap" bgcolor="#000000">
<input name="admin_user" type="text" class="admin_input" id="admin_user" maxlength=16
οnmοuseοver="this.style.background='#efefef';" οnmοuseοut="this.style.background='#FFFFFF'" onFocus="this.select(); "
regExp="^[/w/-_/.]{4,16}$" info="请输入4-12的a-z,A-Z,0-9,_,-,." normalColor="#aaaaaa"
/> </td>
</tr>
<tr>
<td align="right" bgcolor="#000000">密码:</td>
<td bgcolor="#000000">
<input name="admin_pwd" type="password" class="admin_input" id="admin_pwd" maxlength=16
οnmοuseοver="this.style.background='#efefef';" οnmοuseοut="this.style.background='#FFFFFF'" onFocus="this.select(); "
regExp="^[/w/-_/.]{3,16}$" info="请输入3-12的a-z,A-Z,0-9,_,-,." normalColor="#aaaaaa"
/> </tr>
<tr>
<td align="right" bgcolor="#000000">验证码:</td>
<td bgcolor="#000000"><input name="checkCode" type="text" id="checkCode" maxlength="4" size=4 class="checkcode"
οnmοuseοver="this.style.background='#efefef';" οnmοuseοut="this.style.background='#FFFFFF'" onFocus="this.select(); "
regExp="^[/w]{4}$" info="请输入左边的 4 位 字母." normalColor="#aaaaaa"
/>
<img src="inc/checkcode/checkCode.asp" align="absmiddle"/> </td>
</tr>
<tr>
<td height="30" colspan="2" align="right" bgcolor="#000000"><hr size="1" /></td>
</tr>
<tr>
<td bgcolor="#000000"> </td>
<td bgcolor="#000000">
<input type="submit" name="Submit" value=" 登陆 " style="background:#ffffff;" /> </td>
</tr>
</form>
</table>
<script language="javascript" src="Javascript/clientValidate.js"></script>