2006-12-12

[prototype学习]基于prototype的表单验证(二)

上次在javaEye上看到了一个有关验证的帖子后，感觉和我的想法很相似，就着手做了扩展，
http://www.javaeye.com/topic/36302做得比较简单，因为当前的项目只要求在IE下OK，也没仔细改进，该帖子发出以后，有人推荐了国外的一个验证框架，以前我也看到过，当时没发现其亮点，而且功能上实在太简单，无法胜任平时的验证，几乎只是一些不带参数的格式验证，如数字、字母等等，再者有人大力推荐国人badqiu对其做的扩展，做得很不错，几乎能胜任我所遇到的所有验证:
1、每个验证规则需重复考虑是否为空
2、老外本身没考虑国际化，所以框架中把默认错误信息和验证规则绞合在一起。
3、badqiu做了验证规则的depends扩展,如validate-in-rang 规则 回在其验证之前进行 validate-integer 的验证，由于是在老框架上做这样的处理，使得代码可读性下降很多。
4、该框架没有把验证的逻辑和各种帮助函数很好的分开，使得整个逻辑部分不够集中，代码可读性和条理上不够清爽。
5、validation验证器内部传递参数过于复杂，很多地方都是需要几个参数就传几个参数这样而不是把整个实例的引用传过去，导致代码阅读比较费力。
6、命名上validation验证器把每个验证规则称为 validator 整个验证器称为 validation 区别不是很明了，而我的理解是元素classname中每个name对应的是一条规则而已，所以easyvalidation中使用的是rule，且我把整个验证相关的部分都封装在easyvalidation命名空间之内。
另外我针对 radio checkbox 和 select 实现了 选项数目的范围等验证.对照myvalidator做
了个相应的demo 。把badqiu和老外（andrew）的验证demo 分别对应做了一下
(个别不一定配置全部正确 时间和精力的关系，今天刚完成），并且把几种不同配置下的demo做成了单独的页面，针对一些特别的html tag，老外和badqiu的在这上面，我用的时候觉得应该改进，所以做了修改，实现效果会不一样。
做这个东西，并不带什么目的性（自己能用上），只是拿出来和大家作为一个学习上的交流而已，我这段时间在学习javascript，想针对prototype做一些东西练练手，刚好验证这一块也是我很感兴趣的.
这个东西如有不完善之处，希望有兴趣的朋友发现后能给予说明。

PS:一有最新的我就放到这里来哦 我回更改日期的
20070126

20080815

2008081523
针对select radio checkbox的验证效果也做了改良 各位可以看看 还不满意的 请提意见 谢谢：）
  • 20080815.rar (30 KB)
  • 描述: 进行了各个文件的分离，吸收了一些朋友提出的问题
  • 下载次数: 132
  • 2008081523.rar (30.3 KB)
  • 描述: 比较完整好用了 嘿嘿
  • 下载次数: 400
评论
jianfeng008cn 2007-08-29
bubble 写道
支持sturts的页面校验吗，我不喜欢struts的那个validator框架，呵呵


name要支持也方便的 等我空一点加上 现在就加个id拉 已经很简单了吧 呵呵 接下来我会逐渐简化代码的
bubble 2007-08-28
支持sturts的页面校验吗，我不喜欢struts的那个validator框架，呵呵
jianfeng008cn 2007-08-15
项目没使用submit按钮来提交表单 而且需要使用自动验证功能 已做到前台验证没有js代码 方法根据
http://ajax.org/space/start/2006-05-15/2非常感谢

代码已经提交 带了2个例子 见主贴附件 2007081523.jar
jianfeng008cn 2007-08-15
最近做一个小项目 验证重新搞了下，按照以前的想法进行了错误资源文件error 工具文件util 逻辑辅助文件helper 和主要逻辑文件easyvalidation的分离。
jianfeng008cn 2007-08-15
sunjilu05 写道
submit button reset 等元素应该不用验证直接跳过才对. 

if(tagN=='input'){
			if(type == 'submit' || type== 'button' || type=='reset'){
				return null;
			}
			if(type == 'file') {
				return elm.value;
			}
			if(type == 'radio'||type == 'checkbox') {
				return type;
			}			
			return $F(elm);		
		}


这样处理目前没发现问题 可以看$F的实现
jianfeng008cn 2007-08-15
sunjilu05 写道
Try.these(
			function(){ return $('advice-' + className + '-' + EasyValidationHelper.getElmID(elm)) },
			function(){ return $('advice-' + EasyValidationHelper.getElmID(elm)) }
		);


当第一 function 返回null时好象不会执行第二个 吧


返回null是在哪种情况下呢？
sunjilu05 2007-06-27
submit button reset 等元素应该不用验证直接跳过才对. 

if(tagN=='input'){
			if(type == 'submit' || type== 'button' || type=='reset'){
				return null;
			}
			if(type == 'file') {
				return elm.value;
			}
			if(type == 'radio'||type == 'checkbox') {
				return type;
			}			
			return $F(elm);		
		}
sunjilu05 2007-06-25 
Try.these(
			function(){ return $('advice-' + className + '-' + EasyValidationHelper.getElmID(elm)) },
			function(){ return $('advice-' + EasyValidationHelper.getElmID(elm)) }
		);


当第一 function 返回null时好象不会执行第二个 吧
goby2008 2007-06-10
这种写法,相比在struts里做验证,好多啦!
小嘴看世界 2007-03-28
我也做过一个验证表单的东西
使用的是validation_cn.js 跟楼主用的一样 只是不知道版本是多少
感觉还是很好用的 提供了很多正则表达式 自己如果需要略加补充就OK了
jianfeng008cn 2007-02-03
恩，谢谢！
Tobar 2007-02-02
647行能不能改成 
this.form = $(form)?$(form):document.forms[form];

否则当form对象没有id的时候无法用name来获得引用
billy119 2007-01-24
嗯,你说的也是,这个东西好看只是加分作用,功能其实和你这个,以及Validation都差不多，嗯，不过觉得国外他们这个东西在细节方面比较注意，像是色彩搭配，边框，看起来挺精致的。呵呵，毕竟是产品化的东西。另谢谢lz的无私奉献,呵呵
jianfeng008cn 2007-01-24
谢谢ls朋友的建议，不过我感觉你说的那个东东是把简单问题做复杂了，我相信，项目中客户在这方面不会有什么苛刻的要求，那个验证别说客户了，我用着都不明白，得好好思量了一番，而且配置烦琐，功能也不见得强大。

你说的图片功能可以通过css来实现的

接下来我想把验证的规则，错误信息，验证核心代码等放到不同的文件里，
然后做几个demo把一些我想到的比较好的用法展示一下。
billy119 2007-01-24
我原来运行的就是根目录下的,不过现在运行最新的就没有问题了:)
还想提点建议就是像Zapatec AJAX Forms那样
1.图片提示
2.输入框限制提示例如：
___-____
Zapatec AJAX Forms的运行速度比较慢
jianfeng008cn 2007-01-24
billy119 写道
在firefox2.0.0.1下无法正常使用，交验效果一点都没出来


我的firefox是这样的

Mozilla/5.0 (Windows; U; Windows NT 5.1;
en-US; rv:1.8.0.8) Gecko/20061025
Firefox/1.5.0.8

能进行验证啊 你指的是根目录下的还是里面那些目录下的demo啊？

我再把最新的demo发一下，前面的过段时间我就把他删掉
billy119 2007-01-24
在firefox2.0.0.1下无法正常使用，交验效果一点都没出来
jianfeng008cn 2007-01-23
wuhua 写道
Hi 总楼主，我再使用您的类库的时候发现一个问题：
问题描述，密码验证问题：
比如你在例子中是这样的。
<tr>
<td>密码：</td><td><input name="password" id="password" class='required' ></td>
</tr>
<tr>
<td>elm-equals-password：</td><td><input name="passwordRepeat" id="passwordRepeat" class='required elm-equals-password' ></td>
</tr>
这样是没问题的
我吧其中
tr>
<td>密码：</td><td><input name="password" id="password" class='required' ></td>
</tr>

name="password" id="password"
改为member.password ,然后点提交的时候就没反应，
里面提示js错误说tagname不时对象或者时没定义

能解决吗？



elm-equals-password

这个password也需要改成member.password ，谢谢提出问题，我会改进的。
wuhua 2007-01-22
Hi 总楼主，我再使用您的类库的时候发现一个问题：
问题描述，密码验证问题：
比如你在例子中是这样的。
<tr>
<td>密码：</td><td><input name="password" id="password" class='required' ></td>
</tr>
<tr>
<td>elm-equals-password：</td><td><input name="passwordRepeat" id="passwordRepeat" class='required elm-equals-password' ></td>
</tr>
这样是没问题的
我吧其中
tr>
<td>密码：</td><td><input name="password" id="password" class='required' ></td>
</tr>

name="password" id="password"
改为member.password ,然后点提交的时候就没反应，
里面提示js错误说tagname不时对象或者时没定义

能解决吗？
wuhua 2007-01-21
下载来看了，感觉很不错。
发现对我的项目很有用，在认真的学习中。
希望楼主可以开发更具有挑战性的东西。
jianfeng008cn
搜索本博客
我的相册
11f2e450-fb73-39c2-8124-8f1fda304b90-thumb
旋转 SNV10095
共 1 张
存档
最新评论