`

【prototype学习】基于prototype的表单验证(二)

阅读更多
上次在javaEye上看到了一个有关验证的帖子后,感觉和我的想法很相似,就着手做了扩展,
http://www.iteye.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)
  • 描述: 进行了各个文件的分离,吸收了一些朋友提出的问题
  • 下载次数: 209
  • 2008081523.rar (30.3 KB)
  • 描述: 比较完整好用了 嘿嘿
  • 下载次数: 666
分享到:
评论
5 楼 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不时对象或者时没定义

能解决吗?
4 楼 wuhua 2007-01-21  
下载来看了,感觉很不错。
发现对我的项目很有用,在认真的学习中。
希望楼主可以开发更具有挑战性的东西。
3 楼 jianfeng008cn 2007-01-21  
今天陪女友值班顺便整理了一下,把 demo简化成只有一个了,先放上来,欢迎有尝试的朋友提意见或批评哦 

已放在主贴
2 楼 jianfeng008cn 2007-01-19  
validation1.5.3 是官方的项目文件(老外的)
validation1 是badqiu的项目文件
myvalidator 是我扩展的表单验证(一)的项目(对我而言 )文件

现在easyvalidation在我平时的使用中还是很方便的,不过这个帖子上的东西比较乱,我有时间了会整理一下的,现在又加了几条规则。

我打算把规则函数提出来,提出来感觉使用上更方便。
再把demo做得清晰实用点,现在的是第一次写很乱,而且因为后期的修改有一些错误在里面。
1 楼 pirateship 2007-01-19  
主目录下面还有三个文件夹,能不能说明一下那些是做什么用的?

相关推荐

    基于Prototype的Validation表单验证插件.rar

    实现Ajax风格的无刷新表单验证功能,当用户输入完表单,即时显示该项输入是否正确,不正确则会给出提示,适合那些比较喜欢简洁风格,又要求功能准确的用户,本款表单验证插件基于Prototype插件。

    表单验证类 基于prototype的validation.js

    `validation.js`是一个专门用于前端表单验证的库,它基于Prototype JavaScript框架构建,提供了一种简单且灵活的方式来实现这一功能。 **Prototype框架** 是一个广泛使用的JavaScript库,它扩展了JavaScript语言的...

    基于prototype的表单验证框架rapid-validation-v1.0

    简洁,快速的验证语法 无需编写验证提示信息(当然也支持自定义提示信息) 错误消息在指定地方显示 支持组合验证 Ajax支持 基于prototype.js 支持国际化 易于扩展 基于标准的Html属性...

    Ajax最全页面验证-基本prototype框架

    本文将深入探讨Ajax在表单验证中的应用,特别是基于Prototype框架的实现方式,以及动态验证的重要性。 一、Ajax基础 Ajax的核心是通过JavaScript与服务器进行异步通信,无需刷新整个页面就能获取或更新数据。它由...

    最简单的表单验证框架发布

    综上所述,这个压缩包提供了一个基于JavaScript的表单验证框架,可能包含以下关键知识点: - HTML表单验证基础 - 使用JavaScript进行前端验证 - 如何集成和配置验证框架 - Prototype库的使用 - 多语言支持(尤其是...

    Ajax表单验证

    解压后,你可以学习如何集成Prototype与Ajax来创建高效、用户友好的表单验证系统。这个框架可能涵盖了各种验证场景,例如邮箱格式检查、手机号码验证、密码强度检测等,以及如何动态更新表单元素和处理Ajax请求的...

    javascript表单验证类

    在表单验证类中,我们可以利用Prototype扩展验证规则,例如: ```javascript FormValidator.prototype.isRequired = function(field) { return field.value.trim() !== ''; }; // 使用 formValidator.isRequired...

    漂亮表单验证和密码强度的验证

    前端验证通常使用JavaScript或者jQuery等库,如提供的`prototype_1.7_rc2.js`可能就是用来增强HTML表单验证功能的。前端验证的优点在于可以实时反馈错误,提高用户体验,但缺点是容易被绕过,所以后端验证同样必不可...

    Extjs验证表单 Extjs验证表单

    ### Extjs 表单验证详解 #### 一、引言 在现代Web开发中,确保用户输入的有效性和安全性至关重要。Extjs作为一种强大的JavaScript框架,提供了丰富的功能来帮助开发者轻松实现客户端验证。本文将深入探讨Extjs中的...

    prototype整合json实现无刷新验证用户名

    在Web开发中,为了提供更好的用户体验,我们常常需要实现无刷新验证功能,即在用户输入信息时即时检查数据的有效性,而无需提交整个表单。本教程将关注如何使用JavaScript库Prototype结合JSON(JavaScript Object ...

    ASP基于Prototype的Ajax无刷新登录实例

    ASP基于Prototype的Ajax无刷新登录实例是一个非常适合初学者学习AJAX技术的应用案例。在这个实例中,我们将探讨如何在ASP(Active Server Pages)环境中利用Prototype JavaScript库实现无刷新的用户登录功能,同时...

    Prototype-1.pdf

    - **表单验证**:利用Prototype的DOM操作API进行表单字段的验证和错误提示。 #### 六、Prototype框架的学习资源 - **官方文档**:最权威的学习资源,包含详细的API文档和示例代码。 - **在线教程**:网络上有很多...

    基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼

    增加validate-ajax以支持ajax验证 增加validate-pattern直接通过正则表达式的认证 修改validate-equlas以验证密码与确认密码的问题 增加less-than与great-than的验证以支持开始日期与结束日期相比较的问题 增加...

    validform表单验证

    ValidForm是一款强大的JavaScript表单验证插件,专为前端开发者设计,用于实现高效、便捷的表单数据验证。它的核心功能在于提供了一种简洁的方法,让开发者能够在用户提交表单前,对输入的数据进行实时检查,确保...

    JavaScript 表单验证

    ### JavaScript 表单验证知识点详解 #### 一、表单验证的重要性 在Web开发中,表单验证是一项非常重要的功能。它确保用户提交的数据符合预期的格式和规则,从而提高用户体验,减少服务器端处理无效数据的可能性。...

    prototype 1.4 开发者手册(中文PDF)

    而Ajax组件如`Form.Element`和`Form`类则提供了表单操作和验证的便捷方法。 总的来说,《Prototype 1.4 开发者手册》是学习和掌握Prototype库不可或缺的参考资料。它不仅详细阐述了Prototype的基础知识,还提供了...

    ASP源码—基于Prototype的Ajax无刷新登录实例.zip

    ASP源码—基于Prototype的Ajax无刷新登录实例.zip是一个压缩包,其中包含了使用ASP(Active Server Pages)技术构建的一个无刷新登录系统。该系统利用了Ajax(Asynchronous JavaScript and XML)技术,通过...

    Really easy field validation with Prototype 1.5.3 中文扩展版

    "Really easy field validation with Prototype 1.5.3 中文扩展版"是一个针对Prototype JavaScript库的前端验证插件,旨在简化网页表单的数据验证过程。这个工具以其简单易用和强大的功能著称,并且提供了对多语言的...

    Prototype学习资料

    10. **Form**: 包含了一系列与表单相关的功能,如数据验证和操作,提高了表单处理的效率。 11. **Event**: 简化了事件处理,提供了一套跨平台的事件封装机制,便于事件监听和触发。 12. **Position**: 提供了元素...

Global site tag (gtag.js) - Google Analytics