javascript:使用ice.validate验证表单

最新推荐文章于 2023-08-31 16:11:35 发布

Allenice

最新推荐文章于 2023-08-31 16:11:35 发布

阅读量2.6k

点赞数

分类专栏： javascript 文章标签： javascript input ajax button url email

本文链接：https://blog.csdn.net/Allenice1/article/details/6804942

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

应团队开发的需要，我自己写了一个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

Allenice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript:使用ice.validate验证表单

应团队开发的需要，我自己写了一个javascript的表单验证功能，目的是快速的进行表单验证。其实这ice.validate是我自己写的一个javascript框架ice的一部分。由于最近加入了老师组的学生开发团队，然后自己的团队的项目又要开始，所以时间比较紧，等有空再写其他的部
复制链接

扫一扫