收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 37015|回复: 30

简洁,人性化的表单验证程序[js]

[复制链接]
发表于 2006-8-18 16:13:00 | 显示全部楼层 |阅读模式
看了山人表单验证,又看了其他一些验证程序和相关的一些参考资料,写出了一个比较简洁的js表单验证程序。
功能简述:

验证:
  • http地址。
  • 时间日期
  • e-mail
  • 数字
  • 字符长度检查
  • 一项输入与另一项输入比较(例如:密码的确认输入)
  • 大小比较(只能有一个比较符号)

特点
  • 扩展容易,可以方便的添加自己需要的验证方式
  • 兼容性好(ie5,6 firefox,oprea)。
  • 可用性好,没有使用alert()来弹出提示;

编写思路:
整个程序的结构及较简单
为了能够验证一些常用的格式,先对js的内置对象进行了扩展
比如:
String.prototype.isUrl = function(){
        var url = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
        var tmpStr = this;
        return url.test(tmpStr);
}这个用来验证http地址。
然后写了一个对象叫做vform 包含了主要的功能
vform初始化的时候,会检查添加好的验证规则,并将要验证的表单控件对象扩展,添加validate() 和 validlength()两个函数,并且添加onblur事件来进行验证。
出错提示采用的建立div对象的方法,出错就显示,正确就隐藏。所以还需要给div定义一个样式。
使用前需要指定表单的id 注意是id不是name 要不然会出错
而规则添加的时候要指定的是表单控件的name属性不是id
验证规则参数为 obj,minLength,dataType,errmsg,maxLength

第一个为表单控件name

第二个是 填写的字符串最小长度0意味着可以不填 而1意味着是必添

第三个是验证格式 有
  • e-mail
  • url
  • date
  • number
  • any
  • 还有两种动态的格式用\开头, \表单控件的name 表示必须与之的值一样;
  • \>数字 表示大于数字,类推;但是没有\>=这样的

第四个是 最大长度。

与其他程序不一样的是:我对http地址与日期格式地址的处理不同,填入的地址没有http://我会添加上后验证,这样比较人性化,符合可用性的要求。日期的处理也是一样,先尽可能的对填写的数字进行格式转化,然后再验证。格式采用了yyyy-mm-dd的格式。


原始位置:http://lxbzj.com/product/vform/index.htm
原始文件应用一个日历输入控件在此省略。。。
总代码:

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 mickeyboy 于 2006-10-10 08:53 编辑 ]

评分

参与人数 1威望 +3 收起 理由
Sheneyan + 3 原创内容

查看全部评分

发表于 2006-8-23 08:32:21 | 显示全部楼层
关闭js没有作用了,能强制使用吗?
回复 支持 反对

使用道具 举报

发表于 2006-8-23 08:50:20 | 显示全部楼层
验证这种东西,最好服务端和客户端都要做,这种冗余比较必要。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-8-23 09:22:38 | 显示全部楼层
时下,表单验证程序总是在用户把表格填写完成以后,鼠标点击提交按钮时才进行输入数据的正确性验证,但这往往是滞后了验证的时间。其实最佳的验证时机是用户在输入数据时或者一项内容填写完成以后,通过及时的获取用户输入的数据然后进行验证。这样用户可以在第一时间知晓数据的正确性,帮助用户在最短的时间里填写完正确的表格,省去了从头检查的烦恼,更为人性化。(山人的程序也有这个配置)

      JavaScript中,可供验证程序使用的事件有click submit keypress keydown keyup focus blur等等,我们可以通过使用keypress 和 onblur事件来达到实时验证这个目标。

      用户在输入框中输入文字的时候会触发keypress事件,我们就可以启动一个程序来获取用户的输入内容进行检验,如果输入不能被接受,我们就可以弹出提示框来提示用户修改输入。
用户填写完一项后一般会填写其它项输入这时会触发blur事件,我们也可以启动程序验证输入的正确性。
表单验证是一个很广泛的应用,所以对该程序的兼容性要格外的严格一些,由于浏览器版本与JavaScript紧密相关,所以就以浏览器的版本来要求验证程序的兼容性,最基本的要求是:兼容当下流行,应用广泛的浏览器(ie5.5 ie6.0 ie7.0 firefox mozila opera )

      对于无法做到兼容的浏览器,则必须要通过服务器端的验证程序来弥补(这一过程也是必须的,也只有服务器端的验证是安全的,也就是说客户端的验证只是可用性的提高)。

[[i] 本帖最后由 mickeyboy 于 2006-8-23 09:24 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2006-8-23 09:47:36 | 显示全部楼层
对了,楼主,有个应用上的修改最好加一下:

最后一个出错的提示最好设置它的z-index最大,否则提示可能会被其它的出错提示遮住
回复 支持 反对

使用道具 举报

发表于 2006-9-4 21:32:18 | 显示全部楼层
不错!!
其实网站要的就是它的人性化!!
学习!!
回复 支持 反对

使用道具 举报

发表于 2006-9-4 21:41:03 | 显示全部楼层
不太美观   还容易出错  不是太好 这是我的意见。。。
回复 支持 反对

使用道具 举报

发表于 2006-9-5 10:11:33 | 显示全部楼层
提示太多 每次鼠标onblur的时候都提示 这样会给用户造成困扰 应该只在提交的时候提示相应错误
回复 支持 反对

使用道具 举报

发表于 2006-9-5 21:49:43 | 显示全部楼层
思路很好哩!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-9-6 11:32:22 | 显示全部楼层
原帖由 [i]Satellite 于 2006-9-5 10:11 发表
提示太多 每次鼠标onblur的时候都提示 这样会给用户造成困扰 应该只在提交的时候提示相应错误

当你要真真的填写这个表单的时候,正确的会大于错误量。谁也不会专门看那么多的错误吧?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-9-6 16:17:59 | 显示全部楼层
原帖由 [i]SinNeR 于 2006-9-6 14:27 发表
还是有bug的。。。

努力改进它!
回复 支持 反对

使用道具 举报

发表于 2006-9-6 17:51:18 | 显示全部楼层
alibaba的验证很强.......
回复 支持 反对

使用道具 举报

发表于 2006-9-7 22:29:14 | 显示全部楼层
原帖由 [i]9999999999999 于 2006-9-4 21:41 发表
不太美观   还容易出错  不是太好 这是我的意见。。。

觉得不美观可以自己改CSS。。。

楼主兄,多谢分享,不过能不能写个接口说明?要看你的程序恐怕得花一段时间,既然共享了,却不写接口说明,好像有点失去了共享的意义。。。(PS:虽然你解释了参数,但只说了前5个,我发现你的函数有7个参数)
还有个问题:init以后能不能再rule.add?

发现问题。。。确实没有问题的数据,在blur验证通过以后,却在submit的时候提示有错。。。真奇怪。。。

[[i] 本帖最后由 Jennal 于 2006-9-7 22:43 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2006-9-7 23:13:34 | 显示全部楼层
经过检查把onsubmit里的!_o.isvalid改成!_o.validate(),似乎就没有问题了

希望加入deleterule功能~~~就可以实现动态项目的判断了。。。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-10-10 08:48:21 | 显示全部楼层
原帖由 [i]Jennal 于 2006-9-7 23:13 发表
经过检查把onsubmit里的!_o.isvalid改成!_o.validate(),似乎就没有问题了

希望加入deleterule功能~~~就可以实现动态项目的判断了。。。

哦这个问题,确实存在,改过后忘记补充了。
那个参数的问题,是为了以后更改补充而设置的,因为有些验证还没有遇到过。参数现只用到了5个。
回复 支持 反对

使用道具 举报

发表于 2006-10-18 11:08:45 | 显示全部楼层
在填写表单时,有时我并不是按顺序去填写的。比如我的密码设置问题还没想好。我就先填写其它项。有点像考试做题一样。
 还是不错的。支持!
回复 支持 反对

使用道具 举报

发表于 2006-10-20 22:24:37 | 显示全部楼层
原帖由 [i]Sheneyan 于 2006-8-23 08:50 发表
验证这种东西,最好服务端和客户端都要做,这种冗余比较必要。


这个的确是实际操作的重点. 就是因为这个, 我客户端一般不写验证.

不过小的一直都十分支持晓宝兄的程序.
回复 支持 反对

使用道具 举报

发表于 2006-10-20 23:24:23 | 显示全部楼层
喜欢,收下了,
回复 支持 反对

使用道具 举报

发表于 2006-10-21 20:07:04 | 显示全部楼层
这作品速度是不是有点问题?我在输入内容时经常出现停顿。
回复 支持 反对

使用道具 举报

发表于 2006-10-21 20:18:22 | 显示全部楼层
再顶,非常支持
收下改改自己用
回复 支持 反对

使用道具 举报

发表于 2007-1-27 13:16:39 | 显示全部楼层
收藏了。。。觉得挺有用。
回复 支持 反对

使用道具 举报

发表于 2007-1-27 23:06:40 | 显示全部楼层
看淘宝的注册,个人认为不错
回复 支持 反对

使用道具 举报

发表于 2007-1-28 00:10:09 | 显示全部楼层
谢谢!收藏待用。
回复 支持 反对

使用道具 举报

发表于 2007-1-28 11:05:49 | 显示全部楼层

焦点不好选上啊

在点几点鼠标才能选上,那个一闪一闪的提示不太好
回复 支持 反对

使用道具 举报

发表于 2008-6-4 12:46:43 | 显示全部楼层
还是提交时一次性的验证比较好
回复 支持 反对

使用道具 举报

发表于 2009-11-18 08:47:03 | 显示全部楼层
我觉得楼主 2006年的时候  对js的认识 已经达到了一个比较高的层次
虽然现在那些代码 看起来 有很多的问题
但对于2006那个年代 已经非常不错了
相信 楼主如果一直努力到现在
肯定非常的厉害
回复 支持 反对

使用道具 举报

发表于 2009-11-24 11:54:33 | 显示全部楼层
其实即时提醒也挺好。刚blur的时候就能知道哪里出问题了。喜欢。只是,界面效果不大好。呵呵
回复 支持 反对

使用道具 举报

发表于 2010-2-26 11:08:52 | 显示全部楼层
喜欢,收藏了!
回复 支持 反对

使用道具 举报

发表于 2010-3-1 14:46:42 | 显示全部楼层
一直在找,谢谢, 先收藏,回头再研究,
回复 支持 反对

使用道具 举报

发表于 2011-5-16 11:12:25 | 显示全部楼层
外观好像不怎么好
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2017-9-26 03:26 , Processed in 0.135345 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表