javascript通用表单验证

不管是动态网站,还是其它B/S结构的系统,都离不开表单
表单做为客户端向服务器提交数据的载体担当相当重要的角色.
这就引出了一个问题,提交的数据合法吗?摆在我们面前的问题就是验证这些数据
保证所提交的数据是合法的.所以,我们写了一个大堆的验证函数.当我们开始新的一个
项目的开发时,我们又得写一大堆的验证函数,然后再调试这一大堆的函数...

本文将介绍一种方法来提高我的代码的可重用性,提高我们的开发效率.

个人以为表单的验证应该包含两部分:
第一,判断用户输入的数据是否合法.
第二,提示用户你的数据为什么是不合法的.

所以,我们的通用表单验证函数要实现的功能就是:
第一,取得用户输入的数据GetValue(el)
第二,验证用户的数据CheckForm(oForm)
IE支持自定义属性,这就是这个通用函数实现的基础
我们可以在表单元素上加入描述自身信息的属性.有点像XML吧.
check属性:该属性用于存储数据合法性的正则表达式.
warning属性:该性性用于存储出错误提示信息.
第三,返回有误的表单提示GoBack(el)
这三个步骤的触发事件是onsubmit,记住是return CheckForm(this)
搞错了就全功尽弃了 :)


写到这里,整体框架就出来了,通过取得表单元素的check属性,取得字符串,构建正则表达式.再验证其值.如果通过验证就提交,如是数据不合法则取得表单元素的warning属性,产生提示信息.并返回到该表单元素.整个的框架也比较简单.
我们要做的就是写好正则表达式!

接下来我们来分析一下所有的表单元素
按其共性,我们将它们分为三类
每类表单的特点不一样,我们的目标就是写出通用的.

1.文输入框Text





2.单多选框Choose




3.单多下拉菜单Select



讲了一堆"大道理"太抽象了,代码更有说服力!

Check.js JS函数文件
////////////////////////////////////////////////////////////////////////////////
/*
*--------------- 客户端表单通用验证CheckForm(oForm) -----------------
* 功能:通用验证所有的表单元素.
* 使用:
* 
* 
* 
* 
* 注意:写正则表达式时一定要小心.不要让"有心人"有空子钻.
* 已实现功能:
* 对text,password,hidden,file,textarea,select,radio,checkbox进行合法性验证
* 待实现功能:把正则表式写成个库.
*--------------- 客户端表单通用验证CheckForm(oForm) -----------------
*/
////////////////////////////////////////////////////////////////////////////////

//主函数
function CheckForm(oForm)
{
var els = oForm.elements;
//遍历所有表元素
for(var i=0;i正则表达式,不区分大小写
var reg = new RegExp(sReg,"i");
if(!reg.test(sVal))
{
//验证不通过,弹出提示warning
alert(els[i].warning);
//该表单元素取得焦点,用通用返回函数
GoBack(els[i]) 
return false;
}
}
}
}

//通用取值函数分三类进行取值
//文本输入框,直接取值el.value
//单多选,遍历所有选项取得被选中的个数返回结果"00"表示选中两个
//单多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个
function GetValue(el)
{
//取得表单元素的类型
var sType = el.type;
switch(sType)
{
case "text":
case "hidden":
case "password":
case "file":
case "textarea": return el.value;
case "checkbox":
case "radio": return GetValueChoose(el);
case "select-one":
case "select-multiple": return GetValueSel(el);
}
//取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
function GetValueChoose(el)
{
var sValue = "";
//取得第一个元素的name,搜索这个元素组
var tmpels = document.getElementsByName(el.name);
for(var i=0;i
通用表单函数测试:

test:不验证

账号:不能为空

密码:六位以上

电话:

相片上传:

出生日期:日期格式2004-08-10

省份:

请选择
福建省
湖北省



选择你喜欢的运动:

游泳
篮球
足球
排球


你的学历:
大学
中学
小学


个人介绍:
</textareaᡌ个字以上
<input type="submit">
</form> 
</pre>
			</div>
		</div>
		<div class="news-more">
			<ul>
				<li>上篇：<a href="http://www.div-css.com/html/javascript/90636.html" title="支持键盘方向键等按键的页面翻页跳转效果">支持键盘方向键等按键的页面翻页跳转效果</a></li>
				<li>下篇：<a href="http://www.div-css.com/html/javascript/613491936924.html" title="兼容IE firefox的拖拽对象">兼容IE firefox的拖拽对象</a></li>
			</ul>
		</div>
	</div>
</div>
<!-- 主体内容 ]] -->


<script class="javascript" src="/images/Highlighter/shCore.js"></script>
<script class="javascript" src="/images/Highlighter/shBrushCSharp.js"></script>
<script class="javascript" src="/images/Highlighter/shBrushPhp.js"></script>
<script class="javascript" src="/images/Highlighter/shBrushJScript.js"></script>
<script class="javascript" src="/images/Highlighter/shBrushJava.js"></script>
<script class="javascript" src="/images/Highlighter/shBrushVb.js"></script>
<script class="javascript" src="/images/Highlighter/shBrushSql.js"></script>
<script class="javascript" src="/images/Highlighter/shBrushXml.js"></script>
<script class="javascript" src="/images/Highlighter/shBrushDelphi.js"></script>
<script class="javascript" src="/images/Highlighter/shBrushPython.js"></script>
<script class="javascript" src="/images/Highlighter/shBrushRuby.js"></script>
<script class="javascript" src="/images/Highlighter/shBrushCss.js"></script>
<script class="javascript" src="/images/Highlighter/shBrushCpp.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<script type="text/javascript" language="JavaScript" src="/images/js/div-css-20070124.js"></script>

<!--  底部内容 [[ -->
<div id="footer">
	<div class="ctnr">
		<div class="copy">
			网站标准化 <a href="http://www.div-css.com/">www.div-css.com</a>
			© 2007 <span class="author">设计维护：孤know寡闻</span>
			<a class="beian" href="http://www.miibeian.gov.cn/" target="_blank">粤ICP备06110349号</a>
		</div>
	</div>
	<div class="cnzz"><script src="http://s69.cnzz.com/stat.php?id=265381&web_id=265381&show=pic" language="JavaScript" charset="gb2312"></script></div>
	<div class="qq-group">QQ群：群1_40757840满 群2_40486456满 群3_40282428满 群4_30614657满 群5_30614739满 群6_30614856将满<br />
	群7_22077915<span style="color:red">新</span> 人才互动群_11663652<span style="color:red">新</span></div>
</div>
<!--  底部内容 ]] -->


</body>

</html>