javascript 表单验证类

By weisnet On 2009-05-04 At 20:30 View:330

//onfocusFunc 验证脚本 .js文件

//Power By gloot

//QQ: 345268267

///////////////////////////////////////

XML/HTML

<script language="javascript" type="text/javascript">var WebCheck = new onfocusFunc();</script>
<div id="Mainbody">
<div class="Mainbody_line">
<div class="liLeft">
用户名：
</div>
<div class="liCenter">
<input name="regUser" id="regUser" type="text" />
</div>
<div class="liRight">
<div id="regUser_Info">
</div>
</div>
</div>
<div class="Mainbody_line">
<div class="liLeft">
登陆密码：
</div>
<div class="liCenter">
<input name="regPass" id="regPass" type="password" />
</div>
<div class="liRight">
<div id="regPass_info"></div>
</div>
</div>
<div class="Mainbody_line">
<div class="liLeft">
确认密码：
</div>
<div class="liCenter">
<input name="cfrPass" id="cfrPass" type="password" />
</div>
<div class="liRight">
<div id="cfrPass_info"></div>
</div>
</div>
</div>
<div class="SubReg">
<input language="javascript" onclick="if (!SendformResult()) return false; __doPostBack('subReg','')" name="subReg" id="subReg" type="button" value="提交信息" /><br>
</div>
<script language="javascript" type="text/javascript">initForm();</script>
//end

看看上面页面代码中各位文本框后是没有提示信息的页面代码这边（但图片是有的）.

JavaScript

//js文件
var onfocusFunc = function() {}
var state = false;
var ComDo = new onfocusFunc();
onfocusFunc.prototype.focus = {
Onfocus:function(obj)
{
var idbox = document.getElementById(obj);
var idinfo;
for (var item in ComDo.Infos)
{
if (item==obj)
{
idinfo = ComDo.ReturnSpan(item);
idinfo.className = 'focusCss2';
idinfo.innerHTML = ""+ComDo.Infos[item].a;
if (idbox.value.trim()!='')
{
//ComDo.vilidBox(idbox,item);
ComDo.Infos[item].f();
}
}
}
},
Onkeyup:function(obj)
{
var idbox = document.getElementById(obj);
// var idinfo = document.all.item(obj+'_info');
for (var item in ComDo.Infos)
{
if (item==obj)
{
idinfo = ComDo.ReturnSpan(item);
idinfo.className = 'focusCss2';
//idinfo.innerHTML = ""+ComDo.Infos[item].b;
//ComDo.vilidBox(idbox,item);
ComDo.Infos[item].f();
}
}
},
Onblur:function(obj)
{
var idbox = document.getElementById(obj);
var idinfo ;
if (idbox.value.trim()!='')
{
for (var item in ComDo.Infos)
{
if (item==obj)
{
idinfo = ComDo.ReturnSpan(item);
//idinfo.innerHTML = ""+ComDo.Infos[item].b;
ComDo.Infos[item].f();
idinfo.className = 'blurCss2';
}
}
}
else {
for (var item in ComDo.Infos)
{
if (item==obj)
{
idinfo = ComDo.ReturnSpan(item);
idinfo.className = 'blurCss2';
idinfo.innerHTML = ""+ComDo.Infos[item].a;
//ComDo.Infos[item].f();
}
}
}
},
SetInfos:function()
{
for (var item in ComDo.Infos)
{
idinfo = ComDo.ReturnSpan(item);
idinfo.className = 'blurCss2';
idinfo.innerHTML = ""+ComDo.Infos[item].a;
}
}
}
onfocusFunc.prototype.Infos = { //根据页面自己写的.
regUser:{
a:"4-20字符商家登陆名! 看看用户名是否可用",
b:"输入正确! 看看用户名是否可用",
c:"商家登陆名不能为空! 看看用户名是否可用",
d:"regUser",
e:"regUser_Info",
f:function() {
validLength(ComDo.ReturnTagID('regUser'),4,20);
return state;
}
},
regPass:{
a:"6-20字符商家登陆名密码!",
b:"输入正确!",
c:"商家密码不能为空!",
d:"regPass",
e:"regPass_info",
f:function() {
validLength(ComDo.ReturnTagID('regPass'),6,20);
return state;
}
},
cfrPass:{
a:"6-20字符商家确认密码!",
b:"两次密码不一致，请重新输入!",
c:"商家确认密码不能为空!",
d:"cfrPass",
e:"cfrPass_info",
f:function() {
ComDo.vilidBox(ComDo.ReturnTagID('cfrPass'),'cfrPass');
return state;
}
}
}
String.prototype.trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g,'');
}
var initForm = function()
{
var tbl = document.getElementById("Mainbody");
InitInfo();
var inputBox = tbl.getElementsByTagName("INPUT");
for (var i=0;i
{
if (inputBox[i].type=='text' || inputBox[i].type=='password')
{
inputBox[i].onfocus = doFocus;
inputBox[i].onkeyup = doKeyup;
inputBox[i].onblur = doBlur;
}
}
var sel = tbl.getElementsByTagName("TEXTAREA");
for (var i=0;i
{
sel[i].onfocus = doFocus;
sel[i].onkeyup = doKeyup;
sel[i].onblur = doBlur;
}
var sel = tbl.getElementsByTagName("SELECT");
for (var i=0;i
{
sel[i].onfocus = doFocus;
sel[i].onblur = doBlur;
sel[i].onkeyup = doKeyup;
}
}
var doFocus = function() //evnt.target Navigator
{
var obj = srcState(); //jsClass.js
ComDo.focus.Onfocus(ComDo.Infos[obj].d);
}
var doKeyup = function()
{
var obj = srcState();
ComDo.focus.Onkeyup(ComDo.Infos[obj].d);
}
var doBlur = function()
{
var obj = srcState();
ComDo.focus.Onblur(ComDo.Infos[obj].d);
}
function InitInfo()
{
ComDo.focus.SetInfos();
}
//以上是核心脚本
//返回spn showInfo Of the box Validate
onfocusFunc.prototype.ReturnSpan = function(item)
{
//alert(item);
return document.getElementById(ComDo.Infos[item].e);
}
onfocusFunc.prototype.ReturnTagID = function(item)
{ //alert(item);
return document.getElementById(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 "cfrPass":
compareData(idbox,spn,item);
break;
}
}
function checkByteLength(str,minlen,maxlen) {
if (str == null) return false;
var l = str.length;
var blen = 0;
for(i=0; i
if ((str.charCodeAt(i) & 0xff00) != 0) {
blen ++;
}
blen ++;
}
if (blen > maxlen || blen < minlen) {
return false;
}
return true;
}
function validLength(obj,min,max)
{
var spn = ComDo.ReturnSpan(obj.id);
if (!checkByteLength(obj.value.trim(),min,max))
{
//alert('跑')
spn.className = 'errCss2';
spn.innerHTML = ComDo.Infos[obj.id].a;
state = false;
}
else
{
spn.className = 'focusCss2';
spn.innerHTML = ComDo.Infos[obj.id].b;
state = true;
}
}
function compareData(obj,spn,item)
{
var rp = document.getElementById('regPass');
var cp = document.getElementById('cfrPass');
if (rp.value.trim()!=cp.value.trim())
{
spn.className = 'errCss2';
spn.innerHTML = ComDo.Infos[obj.id].b;
state = false;
}
else
{
spn.className = 'focusCss2';
spn.innerHTML = '输入正确';
state = true;
}
}
function validEmail(obj,spn,item) //检测邮箱
{
if (!checkByteLength(obj.value.trim(),6,200))
{
spn.className = 'errCss2';
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 = 'errCss2';
spn.innerHTML = ComDo.Infos[item].c;
state = false;
}
else
{
spn.className = 'focusCss2';
spn.innerHTML = '输入正确';
state = true;
}
}
}
function chkIsexist()
{
var v = document.getElementById('regUser');
var e = document.getElementById('regMail');
if (v.value.trim()=='' || e.value.trim()=='')
{
alert('用户名或邮箱不能为空!');
if (v.value.trim()=='')
v.focus();
else
e.focus();
return false;
}
var Webreq = new Ajax();
Webreq.Config.Result = "ChkIsExistSuc";
Webreq.Config.SucInfo = "恭喜您，该用户名可以使用!";
Webreq.Config.FaildInfo = "对不起，该用户名已被其他人使用了!";
Webreq.Config.returnType = 'Compare';
Webreq.ActionAlert('AjFunc/Default.aspx?editType=ChkIsExist&eid=0&obj='+v.value.trim()+'&eml='+e.value.trim());
}
//验证所在表单控件方法
onfocusFunc.prototype.CheckAllform = function()
{
state = false;
var tbl = document.getElementById("Mainbody");
var inputBox = tbl.getElementsByTagName("INPUT");
for (var k in ComDo.Infos)
{
ComDo.Infos[k].f();
}
for (var k in ComDo.Infos)
{
if (ComDo.Infos[k].f()==false)
{
return false;
}
}
return true;
}

//css Document

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;}

.focusCss2 {width:98%;height:24px;border:1px solid green;padding-Left:4pt;line-Height:24px;text-align:left}
.blurCss2 {width:98%;height:24px;border:0px solid green;padding-Left:4pt;line-Height:24px;text-align:left}
.errCss2 {width:98%;height:24px;border:1px solid red;padding-Left:4pt;line-Height:24px;color:Red;text-align:left}

·上一篇：当setTimeOut方法调用函数的参数为对象类型时出错.
·下一篇：javascript 版 hashtable