📄 通用表单验证函数 - fanqiang_com.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0064)http://fanqiang.chinaunix.net/program/html/2005-06-28/3354.shtml -->
<HTML><HEAD><TITLE>通用表单验证函数 - fanqiang.com</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
FONT: 12pt 宋体
}
TH {
FONT: 12pt 宋体
}
INPUT {
FONT: 12pt 宋体
}
SELECT {
FONT: 12pt 宋体
}
TEXTAREA {
FONT: 12pt 宋体
}
SELECT {
FONT: 12pt 宋体
}
checkbox {
FONT: 12pt 宋体
}
A:link {
COLOR: #e6a306; TEXT-DECORATION: underline
}
A:visited {
COLOR: #e6a306; TEXT-DECORATION: underline
}
A:hover {
COLOR: #ffff00; TEXT-DECORATION: underline
}
BODY {
FONT-SIZE: 12pt; FONT-FAMILY: "宋体", "serif"
}
TD {
FONT-SIZE: 12pt; FONT-FAMILY: "宋体", "serif"
}
P {
FONT-SIZE: 9pt; LINE-HEIGHT: 150%
}
</STYLE>
<META content="MSHTML 6.00.2800.1505" name=GENERATOR></HEAD>
<BODY text=#ffffff bgColor=#000000 leftMargin=0
background="通用表单验证函数 - fanqiang_com.files/bline.gif" topMargin=5
onload=setTailPosition() marginwidth="0" marginheight="5">
<CENTER>
<TABLE cellSpacing=0 cellPadding=0 width=750 border=0>
<TBODY>
<TR>
<TD height=45>
<P align=center><IMG alt="[ 永远的UNIX::UNIX技术资料的宝库 ]"
src="通用表单验证函数 - fanqiang_com.files/title.gif"> </P></TD></TR>
<TR>
<TR>
<TD vAlign=bottom align=left height=40><SMALL><A
href="http://fanqiang.chinaunix.net/">首页</A> > 编程技术 > <A
href="http://fanqiang.chinaunix.net/program/html/index.shtml">HTML/JS/XML</A>
> 正文</SMALL></TD></TR>
<TR>
<TD width="100%" bgColor=#d09f0d colSpan=5 height=2><IMG height=1
src="通用表单验证函数 - fanqiang_com.files/c.gif" width=1></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=750 border=0>
<TBODY>
<TR>
<TD vAlign=top align=middle><BR>
<TABLE cellSpacing=0 cellPadding=0 width="90%" align=center border=0>
<TBODY>
<TR>
<TH class=f24>
<H1>通用表单验证函数</H1></TH></TR>
<TR>
<TD align=middle height=20><FONT color=#999999><SMALL>作者：lcsky
blog.itpub.net (2005-06-28 13:27:18)</SMALL></FONT></TD></TR>
<TR>
<TD><BR></TD></TR>
<TR>
<TD height=15></TD></TR>
<TR>
<TD class=l17><FONT class=f14 id=zoom><FONT color=#cccccc><!-- 正文begin -->
<P>不管是动态网站,还是其它B/S结构的系统,都离不开表单<BR>表单做为客户端向服务器提交数据的载体担当相当重要的角色.<BR>这就引出了一个问题,提交的数据合法吗?摆在我们面前的问题就是验证这些数据<BR>保证所提交的数据是合法的.所以,我们写了一个大堆的验证函数.当我们开始新的一个<BR>项目的开发时,我们又得写一大堆的验证函数,然后再调试这一大堆的函数...</P>
<P>本文将介绍一种方法来提高我的代码的可重用性,提高我们的开发效率.</P>
<P>个人以为表单的验证应该包含两部分:<BR>第一,判断用户输入的数据是否合法.<BR>第二,提示用户你的数据为什么是不合法的.</P>
<P>所以,我们的通用表单验证函数要实现的功能就是:<BR>第一,取得用户输入的数据GetValue(el)<BR>第二,验证用户的数据CheckForm(oForm)<BR>IE支持自定义属性,这就是这个通用函数实现的基础<BR>我们可以在表单元素上加入描述自身信息的属性.有点像XML吧.<BR>check属性:该属性用于存储数据合法性的正则表达式.<BR>warning属性:该性性用于存储出错误提示信息.<BR>第三,返回有误的表单提示GoBack(el)<BR>这三个步骤的触发事件是onsubmit,记住是return
CheckForm(this)<BR>搞错了就全功尽弃了 :)<BR><form onsubmit="return
CheckForm(this)"></P>
<P>写到这里,整体框架就出来了,通过取得表单元素的check属性,取得字符串,构建正则表达式.再验证其值.如果通过验证就提交,如是数据不合法则取得表单元素的warning属性,产生提示信息.并返回到该表单元素.整个的框架也比较简单.<BR>我们要做的就是写好正则表达式!</P>
<P>接下来我们来分析一下所有的表单元素<BR>按其共性,我们将它们分为三类<BR>每类表单的特点不一样,我们的目标就是写出通用的.</P>
<P>1.文输入框Text<BR><input type="text" name="txt"><BR><input
type="password" name="pwd"><BR><input type="hidden"
name="hid"><BR><input type="file"
name="myfile"><BR><textarea
name="txts"></textarea><BR>2.单多选框Choose<BR><input
type="checkbox" name="c"><BR><input type="checkbox"
name="c"><BR><input type="radio" name="r"><BR><input
type="radio" name="r"><BR>3.单多下拉菜单Select<BR><select
name="sel"></select><BR><select name="sels"
multiple></select></P>
<P><BR>讲了一堆"大道理"太抽象了,代码更有说服力!</P>
<P>Check.js
JS函数文件<BR>////////////////////////////////////////////////////////////////////////////////<BR>/*<BR> *---------------
客户端表单通用验证CheckForm(oForm) -----------------<BR> *
功能:通用验证所有的表单元素.<BR> * 使用:<BR> * <form
name="form1" onsubmit="return
CheckForm(this)"><BR> * <input
type="text" name="id" check="^S+$"
warning="id不能为空,且不能含有空格"><BR> * <input
type="submit"><BR> *
</form><BR> * author:wanghr100(灰豆宝宝.net)<BR> *
email:wanghr100@126.com<BR> * update:19:28 2004-8-23<BR> *
注意:写正则表达式时一定要小心.不要让"有心人"有空子钻.<BR> * 已实现功能:<BR> *
对text,password,hidden,file,textarea,select,radio,checkbox进行合法性验证<BR> *
待实现功能:把正则表式写成个库.<BR> *--------------- 客户端表单通用验证CheckForm(oForm)
-----------------<BR> */<BR>////////////////////////////////////////////////////////////////////////////////</P>
<P>//主函数<BR>function CheckForm(oForm)<BR>{<BR> var
els = oForm.elements;<BR>
//遍历所有表元素<BR> for(var
i=0;i<els.length;i++)<BR>
{<BR>
//是否需要验证<BR>
if(els[i].check)<BR>
{<BR>
//取得验证的正则字符串<BR>
var sReg =
els[i].check;<BR>
//取得表单的值,用通用取值函数<BR>
var sVal =
GetValue(els[i]);<BR>
//字符串->正则表达式,不区分大小写<BR>
var reg = new
RegExp(sReg,"i");<BR>
if(!reg.test(sVal))<BR>
{<BR>
//验证不通过,弹出提示warning<BR>
alert(els[i].warning);<BR>
//该表单元素取得焦点,用通用返回函数<BR>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -