您的位置：首页 > Web前端 > JavaScript

javascript:使用ice.validate验证表单

2011-09-23 20:22 337 查看
应团队开发的需要，我自己写了一个javascript的表单验证功能，目的是快速的进行表单验证。其实这ice.validate是我自己写的一个javascript框架ice的一部分。由于最近加入了老师组的学生开发团队，然后自己的团队的项目又要开始，所以时间比较紧，等有空再写其他的部分。
ice.validate的目标是:只写几行javascript代码即可具有强大的表单验证功能。

比如这样：

ice.ready(function () {
ice.validate.form("test");
})


当然这个需要在html代码中添加一些自定义的属性：

<form id="test" action="">
<input id="t1" type="text" validate="email" tipsid="tips1" ok="oktips1" notok="notoktips1"/>
<input id="Text1" type="text" validate="11" tipsid="tips2" ok="oktips2" notok="notoktips2" url="Handler.ashx"/>
<input id="Text2" type="text" validate="2" tipsid="tips3" ok="oktips3" notok="notoktips3"/>
<input id="Text3" type="text" validate="3" tipsid="tips4" ok="oktips4" notok="notoktips4"/>
<input id="doSubmit" type="button" value="验证" />
</form>
<div id="tips1"></div>
<div id="tips2"></div>
<div id="tips3"></div>
<div id="tips4"></div>


其中validate属性指明要验证什么数据类型，验证类型有代号：0-11，也可以写文字形式，用逗号隔开可以验证多种，代号和文字可以混合

代号和文字对应：

0:email //验证是不是邮箱

1:date //验证日期

2:url //验证url

3:ip //验证ip

4:qq //验证qq

5:idcard //验证身份证

6:zipcode //验证邮编

7:engnumund //验证是不是英文字母、数字和下划线

8:chinese //是不是中文

9:number //是不是数字

10:int //是不是整数

11:useajax //用ajax验证

tipsid是存放验证结果信息标签的id,属性ok是验证通过的信息，notok是不通过的信息，如果需要用ajax验证的话，需要url属性，url指明将这一个表单项发送到哪里（只把这个表单项的值以post方式发到服务端，接收用value这个名，string val=context.Request.Form["value"];服务端返回值是字符0或1）；

使用ice.validate,需要两个或以上的文件：

<script src="ice.js" type="text/javascript"></script>
<script src="ice.ajax.js" type="text/javascript"></script>
<script src="ice.validate.js" type="text/javascript"></script>

ice.js是ice的主文件，一定要有，不过内容不多，没时间扩展。ajax.js是对ajax的封装，不过现在只有一个底层的函数，就像jquery的ajax方法。如果你的表单验证不需要ajax，可以不用这个文件。

现在看完整的例子：

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="ice.js" type="text/javascript"></script>
<script src="ice.ajax.js" type="text/javascript"></script>
<script src="ice.validate.js" type="text/javascript"></script>
<script type="text/javascript">
ice.ready(function () {
ice.validate.form("test");
})
</script>
</head>
<body>
<form id="test" action="">
<input id="t1" type="text" validate="email" tipsid="tips1" ok="oktips1" notok="notoktips1"/>
<input id="Text1" type="text" validate="11" tipsid="tips2" ok="oktips2" notok="notoktips2" url="Handler.ashx"/>
<input id="Text2" type="text" validate="2" tipsid="tips3" ok="oktips3" notok="notoktips3"/>
<input id="Text3" type="text" validate="3" tipsid="tips4" ok="oktips4" notok="notoktips4"/>
<input id="doSubmit" type="button" value="验证" /><!--提交的按钮必须是button型，id是doSubmit-->
</form>
<div id="tips1"></div>
<div id="tips2"></div>
<div id="tips3"></div>
<div id="tips4"></div>
</body>
</html>

ice.validate还开放了全部的验证函数和一些事件

由于ice.validate是刚写好的，我测试过没问题，但是其中可能有隐藏的问题，我发表这个文章是想如果有人用了ice.validate，而且发现错误的话，或者有什么建议，可以联系我，我的邮箱是allenice1@gmail.com

源文件连接：ice
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航