////////////////////本javascript 用于验证表单,验证提示///////////////////////////////////////////////
////Power By WeisNet Xhtmler.Com Beta
////转载请注时出处
////////////////////////////////2006-6-17////////////////////////////////////////////////////////////////////////////////
1.要验证的页面 Web.htm
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<head runat="server">
<link href="Css.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="Validate.js?ver=1.0&zWorld"></script>
<title>表单验证</title>
</title>
<body>
<script language="javascript" type="text/javascript">...var WebCheck = new onfocusFunc();</script>
<table cellpadding="3" cellspacing="0" width="100%" style="margin:16pt auto;" id="chkFormTable">
<tr>
<td class="tdCss_f">
用户名<span style="color:red">*</span>
</td>
<td align="left">
<input type="text" name="logName" id="logName" runat="server" class="inputCss" />
</td>
<td class="tdCss_t" align="left">
<div id="logName_info">2-20个字符(包括字母,数字,下划线)!</div>
</td>
</tr>
<!------------------------------>
<tr>
<td colspan="3" class="splitTD">
</td>
</tr>
<!------------------------------>
<tr>
<td class="tdCss_f">
登陆密码<span style="color:red">*</span>
</td>
<td align="left">
<input type="password" name="logPwd" id="logPwd" runat="server" class="inputCss" />
</td>
<td class="tdCss_t" align="left">
<div id="logPwd_info">6-20个字符(包括字母,数字,下划线)!</div>
</td>
</tr>
<tr>
<td class="tdCss_f">
<script language="javascript" type="text/javascript">...var Web=new Main();initForm();</script>
</td>
<td align="left" colspan="2">
<input type="button" name="RegBtn" id="RegBtn" runat="server" onclick="if (!CheckAllform()) return false;" />
</td>
</tr>
</table>
</body>
</html>
<script language="javascript" type="text/javascript" src="Validate.js?ver=1.0&zWorld"></script>
<title>表单验证</title>
</title>
<body>
<script language="javascript" type="text/javascript">...var WebCheck = new onfocusFunc();</script>
<table cellpadding="3" cellspacing="0" width="100%" style="margin:16pt auto;" id="chkFormTable">
<tr>
<td class="tdCss_f">
用户名<span style="color:red">*</span>
</td>
<td align="left">
<input type="text" name="logName" id="logName" runat="server" class="inputCss" />
</td>
<td class="tdCss_t" align="left">
<div id="logName_info">2-20个字符(包括字母,数字,下划线)!</div>
</td>
</tr>
<!------------------------------>
<tr>
<td colspan="3" class="splitTD">
</td>
</tr>
<!------------------------------>
<tr>
<td class="tdCss_f">
登陆密码<span style="color:red">*</span>
</td>
<td align="left">
<input type="password" name="logPwd" id="logPwd" runat="server" class="inputCss" />
</td>
<td class="tdCss_t" align="left">
<div id="logPwd_info">6-20个字符(包括字母,数字,下划线)!</div>
</td>
</tr>
<tr>
<td class="tdCss_f">
<script language="javascript" type="text/javascript">...var Web=new Main();initForm();</script>
</td>
<td align="left" colspan="2">
<input type="button" name="RegBtn" id="RegBtn" runat="server" onclick="if (!CheckAllform()) return false;" />
</td>
</tr>
</table>
</body>
</html>
2 . validate.js
///////////////////////////////////////////////////////////////////////////////////
///////ValidateForm1.0
///////Power By WeisNet Xhtmler.Com
//////////////////////////////////////////////////////////////////////////////////
var onfocusFunc = function() ...{}
var state = false;
var ComDo = new onfocusFunc();
onfocusFunc.prototype.focus = ...{
Onfocus:function(obj)
...{
var idbox = document.all.item(obj);
var idinfo;
for (var item in ComDo.Infos)
...{
if (item==obj)
...{
idinfo = ComDo.ReturnSpan(item);
idinfo.className = 'focusCss';
idinfo.innerHTML = ""+ComDo.Infos[item].b;
if (idbox.value.trim()!='')
...{
ComDo.vilidBox(idbox,item);
}
}
}
},
Onkeyup:function(obj)
...{
var idbox = document.all.item(obj);
// var idinfo = document.all.item(obj+'_info');
for (var item in ComDo.Infos)
...{
if (item==obj)
...{
idinfo = ComDo.ReturnSpan(item);
idinfo.className = 'focusCss';
//idinfo.innerHTML = ""+ComDo.Infos[item].b;
ComDo.vilidBox(idbox,item);
}
}
},
Onblur:function(obj)
...{
var idbox = document.all.item(obj);
var idinfo ;
if (idbox.value.trim()!='')
...{
for (var item in ComDo.Infos)
...{
if (item==obj)
...{
idinfo = ComDo.ReturnSpan(item);
idinfo.className = 'blurCss';
//idinfo.innerHTML = ""+ComDo.Infos[item].b;
}
}
}
else ...{
for (var item in ComDo.Infos)
...{
if (item==obj)
...{
idinfo = ComDo.ReturnSpan(item);
idinfo.className = 'blurCss';
idinfo.innerHTML = ""+ComDo.Infos[item].a;
}
}
}
}
}
onfocusFunc.prototype.Infos = ...{
logName:...{
a:"2-20个字符(包括字母,数字,下划线)!",
b:"请填写用户名!",
c:"用户名不能为空!",
d:"logName",
e:"logName_info",
f:function() ...{
ComDo.vilidBox(ComDo.ReturnTagID('logName'),'logName');
return state;
}
},
logPwd:...{
a:"6-20个字符(包括字母,数字,下划线)!",
b:"请填写用户密码!",
c:"密码不能空!",
d:"logPwd",
e:"logPwd_info",
f:function() ...{
ComDo.vilidBox(ComDo.ReturnTagID('logPwd'),'logPwd');
return state;
}
}
}
String.prototype.trim = function()
...{
return this.replace(/(^s*)|(s*$)/g,'');
}
var initForm = function()
...{
var tbl = document.getElementById("chkFormTable");
var inputBox = tbl.getElementsByTagName("INPUT");
for (var i=0;i<inputBox.length;i++)
...{
if (inputBox[i].type=='text' || inputBox[i].type=='password')
...{
inputBox[i].onfocus = doFocus;
inputBox[i].onkeyup = doKeyup;
inputBox[i].onblur = doBlur;
}
}
}
var doFocus = function() //evnt.target Navigator
...{
var obj = event.srcElement;
ComDo.focus.Onfocus(ComDo.Infos[obj.id].d);
}
var doKeyup = function()
...{
var obj = event.srcElement;
ComDo.focus.Onkeyup(ComDo.Infos[obj.id].d);
}
var doBlur = function()
...{
var obj = event.srcElement;
ComDo.focus.Onblur(ComDo.Infos[obj.id].d);
}
//返回spn showInfo Of the box Validate
onfocusFunc.prototype.ReturnSpan = function(item)
...{
return document.all.item(ComDo.Infos[item].e);
}
onfocusFunc.prototype.ReturnTagID = function(item)
...{
return document.all.item(ComDo.Infos[item].d);
}
//验证方法
onfocusFunc.prototype.vilidBox = function(idbox,item)
...{
idbox.value = idbox.value.trim();
var spn = ComDo.ReturnSpan(item);
switch (ComDo.Infos[item].d)
...{
case "logName":
chkLogName(idbox,spn,item);
break;
case "logPwd":
chkLogPwdf(idbox,spn,item);
break;
default:
break;
}
}
function checkByteLength(str,minlen,maxlen) ...{
if (str == null) return false;
var l = str.length;
var blen = 0;
for(i=0; i<l; i++) ...{
if ((str.charCodeAt(i) & 0xff00) != 0) ...{
blen ++;
}
blen ++;
}
if (blen > maxlen || blen < minlen) ...{
return false;
}
return true;
}
//验证表单
function chkLogName(obj,spn,item)
...{
if (!checkByteLength(obj.value.trim(),2,20))
...{
spn.className = 'errCss';
spn.innerHTML = ComDo.Infos[item].a;
state = false;
}
else
...{
spn.className = 'focusCss';
spn.innerHTML = '输入正确';
state = true;
}
}
function chkLogPwdf(obj,spn,item)
...{
var fpwd = document.all.item('chkLogPwd');
fpwd.value = '';
if (!checkByteLength(obj.value.trim(),6,20))
...{
spn.className = 'errCss';
spn.innerHTML = ComDo.Infos[item].a;
state = false;
}
else
...{
spn.className = 'focusCss';
spn.innerHTML = '输入正确';
state = true;
}
}
function chkChkLogPwd(obj,spn,item)
...{
if (!checkByteLength(obj.value.trim(),6,20))
...{
spn.className = 'errCss';
spn.innerHTML = ComDo.Infos[item].a;
state = false;
}
else
...{
var fpwd = document.all.item('logPwd');
if (fpwd.value.trim()!=obj.value.trim())
...{
spn.className = 'errCss';
spn.innerHTML = ComDo.Infos[item].c;
state = false;
}
else
...{
spn.className = 'focusCss';
spn.innerHTML = '输入正确';
state = true;
}
}
}
function chkLogEmail(obj,spn,item)
...{
if (!checkByteLength(obj.value.trim(),6,20))
...{
spn.className = 'errCss';
spn.innerHTML = ComDo.Infos[item].a;
state = false;
}
else
...{
var RegMail = /^[_a-zA-Z0-9-]+(.[_a-zA-Z0-9-]*)*@[a-zA-Z0-9-]+([.][a-zA-Z0-9-]+)+$/;
if (!RegMail.test(obj.value.trim()))
...{
spn.className = 'errCss';
spn.innerHTML = ComDo.Infos[item].c;
state = false;
}
else
...{
spn.className = 'focusCss';
spn.innerHTML = '输入正确';
state = true;
}
}
}
function chkChkCode(obj,spn,item)
...{
if (obj.value.trim()=='')
...{
spn.className = 'errCss';
spn.innerHTML = ComDo.Infos[item].a;
state = false;
}
else
...{
var SecReg = /^d...{6}$/gi;
if (!SecReg.test(obj.value.trim()))
...{
spn.className = 'errCss';
spn.innerHTML = ComDo.Infos[item].c;
state = false;
}
else
...{
spn.className = 'focusCss';
spn.innerHTML = '输入正确';
state = true
}
}
}
//验证所在表单控件方法
onfocusFunc.prototype.CheckAllform = function()
...{
state = false;
var tbl = document.getElementById("chkFormTable");
var inputBox = tbl.getElementsByTagName("INPUT");
for (var i=0;i<inputBox.length;i++)
...{
if (inputBox[i].type=='text' || inputBox[i].type=='password')
...{
ComDo.vilidBox(inputBox[i],inputBox[i].id);
}
}
for (var k in ComDo.Infos)
...{
if (ComDo.Infos[k].f()==false)
...{
return false;
}
}
return true;
}
var state = false;
var ComDo = new onfocusFunc();
onfocusFunc.prototype.focus = ...{
Onfocus:function(obj)
...{
var idbox = document.all.item(obj);
var idinfo;
for (var item in ComDo.Infos)
...{
if (item==obj)
...{
idinfo = ComDo.ReturnSpan(item);
idinfo.className = 'focusCss';
idinfo.innerHTML = ""+ComDo.Infos[item].b;
if (idbox.value.trim()!='')
...{
ComDo.vilidBox(idbox,item);
}
}
}
},
Onkeyup:function(obj)
...{
var idbox = document.all.item(obj);
// var idinfo = document.all.item(obj+'_info');
for (var item in ComDo.Infos)
...{
if (item==obj)
...{
idinfo = ComDo.ReturnSpan(item);
idinfo.className = 'focusCss';
//idinfo.innerHTML = ""+ComDo.Infos[item].b;
ComDo.vilidBox(idbox,item);
}
}
},
Onblur:function(obj)
...{
var idbox = document.all.item(obj);
var idinfo ;
if (idbox.value.trim()!='')
...{
for (var item in ComDo.Infos)
...{
if (item==obj)
...{
idinfo = ComDo.ReturnSpan(item);
idinfo.className = 'blurCss';
//idinfo.innerHTML = ""+ComDo.Infos[item].b;
}
}
}
else ...{
for (var item in ComDo.Infos)
...{
if (item==obj)
...{
idinfo = ComDo.ReturnSpan(item);
idinfo.className = 'blurCss';
idinfo.innerHTML = ""+ComDo.Infos[item].a;
}
}
}
}
}
onfocusFunc.prototype.Infos = ...{
logName:...{
a:"2-20个字符(包括字母,数字,下划线)!",
b:"请填写用户名!",
c:"用户名不能为空!",
d:"logName",
e:"logName_info",
f:function() ...{
ComDo.vilidBox(ComDo.ReturnTagID('logName'),'logName');
return state;
}
},
logPwd:...{
a:"6-20个字符(包括字母,数字,下划线)!",
b:"请填写用户密码!",
c:"密码不能空!",
d:"logPwd",
e:"logPwd_info",
f:function() ...{
ComDo.vilidBox(ComDo.ReturnTagID('logPwd'),'logPwd');
return state;
}
}
}
String.prototype.trim = function()
...{
return this.replace(/(^s*)|(s*$)/g,'');
}
var initForm = function()
...{
var tbl = document.getElementById("chkFormTable");
var inputBox = tbl.getElementsByTagName("INPUT");
for (var i=0;i<inputBox.length;i++)
...{
if (inputBox[i].type=='text' || inputBox[i].type=='password')
...{
inputBox[i].onfocus = doFocus;
inputBox[i].onkeyup = doKeyup;
inputBox[i].onblur = doBlur;
}
}
}
var doFocus = function() //evnt.target Navigator
...{
var obj = event.srcElement;
ComDo.focus.Onfocus(ComDo.Infos[obj.id].d);
}
var doKeyup = function()
...{
var obj = event.srcElement;
ComDo.focus.Onkeyup(ComDo.Infos[obj.id].d);
}
var doBlur = function()
...{
var obj = event.srcElement;
ComDo.focus.Onblur(ComDo.Infos[obj.id].d);
}
//返回spn showInfo Of the box Validate
onfocusFunc.prototype.ReturnSpan = function(item)
...{
return document.all.item(ComDo.Infos[item].e);
}
onfocusFunc.prototype.ReturnTagID = function(item)
...{
return document.all.item(ComDo.Infos[item].d);
}
//验证方法
onfocusFunc.prototype.vilidBox = function(idbox,item)
...{
idbox.value = idbox.value.trim();
var spn = ComDo.ReturnSpan(item);
switch (ComDo.Infos[item].d)
...{
case "logName":
chkLogName(idbox,spn,item);
break;
case "logPwd":
chkLogPwdf(idbox,spn,item);
break;
default:
break;
}
}
function checkByteLength(str,minlen,maxlen) ...{
if (str == null) return false;
var l = str.length;
var blen = 0;
for(i=0; i<l; i++) ...{
if ((str.charCodeAt(i) & 0xff00) != 0) ...{
blen ++;
}
blen ++;
}
if (blen > maxlen || blen < minlen) ...{
return false;
}
return true;
}
//验证表单
function chkLogName(obj,spn,item)
...{
if (!checkByteLength(obj.value.trim(),2,20))
...{
spn.className = 'errCss';
spn.innerHTML = ComDo.Infos[item].a;
state = false;
}
else
...{
spn.className = 'focusCss';
spn.innerHTML = '输入正确';
state = true;
}
}
function chkLogPwdf(obj,spn,item)
...{
var fpwd = document.all.item('chkLogPwd');
fpwd.value = '';
if (!checkByteLength(obj.value.trim(),6,20))
...{
spn.className = 'errCss';
spn.innerHTML = ComDo.Infos[item].a;
state = false;
}
else
...{
spn.className = 'focusCss';
spn.innerHTML = '输入正确';
state = true;
}
}
function chkChkLogPwd(obj,spn,item)
...{
if (!checkByteLength(obj.value.trim(),6,20))
...{
spn.className = 'errCss';
spn.innerHTML = ComDo.Infos[item].a;
state = false;
}
else
...{
var fpwd = document.all.item('logPwd');
if (fpwd.value.trim()!=obj.value.trim())
...{
spn.className = 'errCss';
spn.innerHTML = ComDo.Infos[item].c;
state = false;
}
else
...{
spn.className = 'focusCss';
spn.innerHTML = '输入正确';
state = true;
}
}
}
function chkLogEmail(obj,spn,item)
...{
if (!checkByteLength(obj.value.trim(),6,20))
...{
spn.className = 'errCss';
spn.innerHTML = ComDo.Infos[item].a;
state = false;
}
else
...{
var RegMail = /^[_a-zA-Z0-9-]+(.[_a-zA-Z0-9-]*)*@[a-zA-Z0-9-]+([.][a-zA-Z0-9-]+)+$/;
if (!RegMail.test(obj.value.trim()))
...{
spn.className = 'errCss';
spn.innerHTML = ComDo.Infos[item].c;
state = false;
}
else
...{
spn.className = 'focusCss';
spn.innerHTML = '输入正确';
state = true;
}
}
}
function chkChkCode(obj,spn,item)
...{
if (obj.value.trim()=='')
...{
spn.className = 'errCss';
spn.innerHTML = ComDo.Infos[item].a;
state = false;
}
else
...{
var SecReg = /^d...{6}$/gi;
if (!SecReg.test(obj.value.trim()))
...{
spn.className = 'errCss';
spn.innerHTML = ComDo.Infos[item].c;
state = false;
}
else
...{
spn.className = 'focusCss';
spn.innerHTML = '输入正确';
state = true
}
}
}
//验证所在表单控件方法
onfocusFunc.prototype.CheckAllform = function()
...{
state = false;
var tbl = document.getElementById("chkFormTable");
var inputBox = tbl.getElementsByTagName("INPUT");
for (var i=0;i<inputBox.length;i++)
...{
if (inputBox[i].type=='text' || inputBox[i].type=='password')
...{
ComDo.vilidBox(inputBox[i],inputBox[i].id);
}
}
for (var k in ComDo.Infos)
...{
if (ComDo.Infos[k].f()==false)
...{
return false;
}
}
return true;
}
3. css文件 css.css
body {...}{
}
.focusCss {...}{width:356px;height:24px;border:1px solid green;padding-Left:4pt;line-Height:24px;}
.blurCss {...}{width:356px;height:24px;border:0px solid green;padding-Left:4pt;line-Height:24px;}
.errCss {...}{width:356px;height:24px;border:1px solid red;padding-Left:4pt;line-Height:24px;color:Red;}
}
.focusCss {...}{width:356px;height:24px;border:1px solid green;padding-Left:4pt;line-Height:24px;}
.blurCss {...}{width:356px;height:24px;border:0px solid green;padding-Left:4pt;line-Height:24px;}
.errCss {...}{width:356px;height:24px;border:1px solid red;padding-Left:4pt;line-Height:24px;color:Red;}