2006-11-21

validator for jQuery

目前jQuery网站上已经有了From的验证框架，FromValidation，但是一直觉得它的框架并不好用，因为重复写的东西太多了。
于是就再次写了自己的JavaScript验证框架，完全废弃掉以前的。
在新的框架下，是以这样子的用法设计的：
首先，要包括自己的js文件（这点不必说），而且在包括自己写，要先包括jQuery的，如下

xml 代码
 
  1. <script type="text/javascript" src="jquery-latest.js"></script>  
  2. <script type="text/javascript" src="wingel.js"></script>  

然后在要验证的Form里面加个属性validatable=true,如下：
xml 代码
 
  1. <form id="registerForm" action="user-register.action" validatable="true">  
注意，这边不要加onsubmit方法

接下来，就好了，比如说有个输入框：
xml 代码
 
  1. <ww:textfield name="name" id="name"/>  

我想验证，让它必填，如下就可以了：
xml 代码
 
  1. <label for="name" validate="required">请填写名称label>  
  其中 for属性里面填的要是验证的输入框id，validate填的是验证方法,;label里面的文本就是验证不过的时候要显示的信息。
如果我想验证一个输入框的输入值长度怎么办，这样子就行了
xml 代码
 
  1. <label for="password" validate="lengthRange:6;20">  
后面的参数用；号隔开，验证的方法名跟参数用: 隔开。
wingel.js里面已经包括了一些常用的验证方法，现在问题来了，如果要自定义验证方法怎么办，如下办：
比如你想加个验证方法是hello
则label里面的validate属性写成hello,
然后加一个JavaScript方法：
js 代码
 
  1. "text/javascript">  
  2.     wingel.validator.rules.hello= function(value, element, parameters,utility) {  
  3.              ...    }  
  4.   

里面三个参数, , couldn't input Chinese. now English will be used.

 

The first parameter is the value of the input element you want to validate,the second one is the validated element, the third one, is the parameters you add in validate label, the last one, is a utility class, you can invoke its method to make your code easier.

评论
Wingel 2006-12-09
相信我，那些提示代码值得。你不应该自己给框架的使用者指定提示信息的位置，而应该让用户自己来指定。
我一开始也是用那种验证方式，不过后来那种方法让我废弃掉了。表面上看起来，用户啥都不用管，不用写提示信息，但是其实这却是最脏的手法，因为你不应该自己随意给用户安排提示信息的格式，位置。
fantasy 2006-11-29
不错,但是如果要实现这样的验证,需要在html中潜入太多的提示代码建议参考下.
http://www.javaeye.com/topic/32983或者http://www.javaeye.com/topic/36302
能够更完善验证组件!
Wingel
搜索本博客
最近加入圈子
存档
最新评论