扩展基于prototype的validation.js

validation.js是一个基于prototype表单前端验证工具,与其它库相比,简单易用.
下面是对validation的介绍
http://tetlaw.id.au/view/blog/really-easy-field-validation-with-prototype/
ajax
http://ajax.org/space/start/2006-05-15/2
http://ajax.org/space/start/2006-05-22/1

以下是对其做的扩展.

新增验证:
增加min-value-number验证,例: 最小值为10.1 = min-value-10.1
增加max-value-number验证,例: 最大值为-100.1 = min-value--100.1
增加长度范围validate-length-range-minLength-maxLength验证,例: 最小长度为1,最大长度为10:validate-length-range-1-10
增加整型数字范围validate-int-range-minValue-maxValue验证,例: 5至20 : validate-int-range-5-20
增加浮点数字范围validate-float-range-minValue-maxValue验证,例: 1.1至10 : validate-float-range-1.1-10
增加min-length-number验证,例: 最小长度为10 = min-length-10
增加max-length-number验证,例: 最大长度为10 = max-length-10
增加文件类型 validate-file-type1-type2-typeX 的验证,例: validate-file-zip-png-jpeg 将验证文件是否为zip,png,jpeg格式之一
增加中文日期验证 validate-date-cn

修改记录:
增加Validation._getInputValue() 取代$F()方法以对file input进行验证
修正Validation.isVisible() 中while循环中elm可能不存在为空的问题
增加ValidationFactory for cache
修改Validation.get()方法使用indexOf()的匹配模式,以适应可以通过class传递参数
修改errorMsg可由方法返回

min-length-number,max-length-number,validate-file-xx1的实现机制主要是直接使用className作为参数传递,再在验证方法中抽取max-length-number的number作为参数使用

下载 http://www.blogjava.net/Files/badqiu/validation1.5.3.rar

posted on 2006-10-28 11:59 badqiu 阅读(4982) 评论(40) 编辑收藏所属分类: AJAX

# re: 扩展基于prototype的validation.js 回复 更多评论

俺正需要一个JS的验证库。多谢啦~

2006-10-28 22:52 | mixlee

# re: 扩展基于prototype的validation.js 回复 更多评论

顶一个

2006-10-30 10:06 | inlife.cn

# re: 扩展基于prototype的validation.js 回复 更多评论

good

2006-10-30 16:13 | 不错.

# re: 扩展基于prototype的validation.js 回复 更多评论

在Struts中使用修改以后的验证框架,在IE下没有任何问题,而使用英文原版的框架则没有任何问题.

2006-11-12 18:58 | Aqing[匿名]

# re: 扩展基于prototype的validation.js 回复 更多评论

在Struts中使用修改以后的验证框架,在IE下没有任何反应,而使用英文原版的框架则没有任何问题.

2006-11-12 18:59 | Aqing[匿名]

# re: 扩展基于prototype的validation.js 回复 更多评论

如果JSP页面中的编码是utf-8,这个中文校验就会失效;
如果JSP页面中的编码是GBK,这个中文校验就没有问题

看来是JAVAScript的编码问题

谢谢你能够把validation翻译过来

2006-11-12 21:22 | Aqing[匿名]

# re: 扩展基于prototype的validation.js 回复 更多评论

在IE中出现错误： "Unterminated string constant"

2006-11-24 20:50 | abc

# re: 扩展基于prototype的validation.js 回复 更多评论

我发现在有一个问题，一个网页，如果是以htm,html或是jsp结尾的话，都没有没有问题，可是，在IIS下，如果使用aspx结尾，即使这个文件不做任何其它的改动，但这个验证效果，就出不来了，而且会出现一个错误：附件是一个JAVASCRIPT报错的提示。

说

行:53

列：33

错误：末结束的字符串常量

代码：0

URL：……

2006-12-20 18:31 | hypgr

# re: 扩展基于prototype的validation.js 回复 更多评论

如果发生"Unterminated string constant"与"末结束的字符串常量"都是由于编码问题引起,请将validation_cn.js另存成与你的网页相适应的编码即可!
validation_cn.js默认是GBK编码

2006-12-20 21:17 | badqiu

# re: 扩展基于prototype的validation.js 回复 更多评论

用ajax框架验证后，显示出错误提示信息，但是仍然可以提交成功。

2007-03-09 15:40 | lly

# re: 扩展基于prototype的validation.js [未登录] 回复 更多评论

新版本已经解决了这个问题，还未发布，你可以通过以下地址下载：
http://svn.javascud.org/svn/si/validation/trunk/

下载前请查看ChangeLog

2007-03-26 09:49 | badqiu

# re: 扩展基于prototype的validation.js 回复 更多评论

只能在IE中使用，不能使用FireFox浏览器。

2007-04-26 13:47 | Tang Anping

# re: 扩展基于prototype的validation.js 回复 更多评论

几种常用的浏览器及其版本都已经测试过,你直接打开test.html,如果测试全部通过那就是正常的了!!
如果以上正常但你编写的页面不正常,那可能是前面说的编码问题,自己查一下

2007-04-27 12:04 | badqiu

# re: 扩展基于prototype的validation.js 回复 更多评论

当链接到一个新页面，提交的时候正常，重置和取消的时候还在验证，这样就需要点击两次，因为你第一次已经获得焦点，能不能修改一下！

2007-05-11 21:19 | Tang Anping

# re: 扩展基于prototype的validation.js [未登录] 回复 更多评论

ajax 驗証好像有點問題..和你的document不太一樣
是
class='validate-ajax-validate-service.jsp'
還是
class='validate-ajax' validateUrl='http://localhost:8080/validate-email.jsp' validateFailedMessage='email already exists'

我兩個方法也不行

2007-06-25 13:10 | Victor

# re: 扩展基于prototype的validation.js 回复 更多评论

开发版是使用前面那种进行ajax验证
后一种方法是v2.3.4版本的ajax验证
源代码svn:
http://svn.javascud.org/svn/si/validation/trunk/
可以下载新版本,还未正式发布

2007-06-27 09:20 | badqiu

# re: 扩展基于prototype的validation.js [未登录] 回复 更多评论

我發覺假如使用了Validation.js後,而我的program中任何一個element id是'result'時,例如<div id="result">abc</div>皆會產生很多奇怪的error,
例如設了immediate=false但會無效和不停跳出一個error
'物件不支援此屬性或方法'
此問題只會出現在IE中,FF好像正常

我花了兩天才找到問題所在呢......@______@

2007-06-29 14:15 | Victor

# re: 扩展基于prototype的validation.js [未登录] 回复 更多评论

還有一個問題..
假如把form的class="require-validate"
會無故執行了focusFirstElement

但我的form 預設是用了prototype的
$(formID).disable...因此Validation.js強迫我要focusFirstElement,令我的程式一直報錯...

最奇怪的地方是.我發覺"require-validate"不是必須的...form沒有設class="require-validate"亦可..那為何document說需要設呢?

2007-06-29 14:31 | Victor

# re: 扩展基于prototype的validation.js 回复 更多评论

通过required-validate标记的表单是会运行Form.focusFirstElement()方法
你可以将这句删除,在源代码的最后部分Validation.autoBind()中

2007-06-29 17:20 | badqiu

# re: 扩展基于prototype的validation.js [未登录] 回复 更多评论

那麼可以不用required-validate 而改為new Validation('frm1',{onSubmit:false});嗎??

另外我之前提及有關<div id="result">abc</div>是否真有其事還是我自己的問題呢???

2007-06-29 17:37 | Victor

# re: 扩展基于prototype的validation.js 回复 更多评论

的确有这样的问题,还未查什么原因!

2007-07-02 09:12 | badqiu

# re: 扩展基于prototype的validation.js [未登录] 回复 更多评论

這個<div id="result">問題我找得發瘋了才找到.....這繼續努力

2007-07-03 11:35 | Victor

# re: 扩展基于prototype的validation.js 回复 更多评论

已经修正<div id="result">这个问题,你可以从svn下载最新版本

2007-07-05 09:01 | badqiu

# re: 扩展基于prototype的validation.js [未登录] 回复 更多评论

請問可否修改個別提示的顯示位置呢???
我的情況像這樣
<div>
<input type="checkbox" name="test[]"> a
<input type="checkbox" name="test[]"> b
<input type="checkbox" name="test[]" class="validate-one-required
"> c
</div>

warnning會顯示在div內,如何個別修改其顯示位置到div外呢?

2007-07-05 14:07 | Victor

# re: 扩展基于prototype的validation.js 回复 更多评论

可以使用

</div>

id的模式等于:

advice-$validatorName-$elementId

具体可以查看源代码:

1     getAdvice : function(name, elm) {
2         return Try.these(
3             function(){ return $('advice-' + name + '-' + ValidationUtils.getElmID(elm)) },
4             function(){ return $('advice-' + ValidationUtils.getElmID(elm)) }
5         );
6     },

2007-07-05 16:18 | badqiu

# re: 扩展基于prototype的validation.js [未登录] 回复 更多评论

這樣便可以做到我要的效果
<div>
<input type="checkbox" name="test[]"> a
<input type="checkbox" name="test[]"> b
<input type="checkbox" name="test[]" class="validate-one-required
"> c
</div>
<div id="advice-validate-one-required-test[]"></div>

但
<div>
<ul>
<li><input type="checkbox" name="test[]">a</li>
<li><input type="checkbox" name="test[]">b</li>
<li><input type="checkbox" name="test[]" class="validate-one-required">c</li>
</ul>
</div>
<div id="advice-validate-one-required-test[]"></div>

這樣的話validate-one-required會有問題,因為他不理會其他test[]
請問有方法幫救嗎?我必須要把它們先放在<ul>,<li>內呢

2007-07-05 17:33 | Victor

# re: 扩展基于prototype的validation.js [未登录] 回复 更多评论

好像可以自行加一個定義即可...我試試看...謝謝

2007-07-05 18:07 | Victor

# re: 扩展基于prototype的validation.js [未登录] 回复 更多评论

和各位分享一下

['validate-one-required-fromGrandParent', function (v,elm) {
var p = elm.parentNode.parentNode;
var options = p.getElementsByTagName('INPUT');
return $A(options).any(function(elm) {
return $F(elm);
});
},{ignoreEmptyValue : false}]

2007-07-05 18:16 | Victor

# re: 扩展基于prototype的validation.js 回复 更多评论

你自己的改动太大了
我感觉在原来的扩展就是,原来升级也没有很大关系
还有我感觉不要那个效果库会好点

2007-08-16 14:59 | diandian

# re: 扩展基于prototype的validation.js [未登录] 回复 更多评论

這點我也同意..
一是選擇以擴展形式...二是自行重新開發一套

2007-08-18 10:13 | Victor

# re: 扩展基于prototype的validation.js 回复 更多评论

@diandian
效果库不要,直接不要导入effects.js即可去掉效果

跟原作者相比是改动很大,主要是原程序功能没有这么强大,只是原作者的创意很棒

2007-08-21 09:36 | badqiu

# re: 扩展基于prototype的validation.js 回复 更多评论

好东西啊,顶顶顶啊!!!

2007-09-27 16:09 | #

# re: 扩展基于prototype的validation.js [未登录] 回复 更多评论

請問如何處理"日期 B 只可以大過或等於日期A"的情況呢???
great-than-$otherInputId
less-than-$otherInputId
equals-$otherInputId
因為這些都不合用

2007-09-28 12:17 | Victor

# re: 扩展基于prototype的validation.js [未登录] 回复 更多评论

請問可否嘗試一下這個組合方式,因為我發現了較多的問題,條件如下
1.兩個日期皆需要填寫
2.兩個必須是日期格式
3.前者必須大於後者
4.把warning msg寫在外

但會發生錯誤..請指教

<input type="text" id="dateFrom" name="dateFrom" class="required-validate-date" value="2007-09-01" />
to
<input type="text" id="dateTo" name="dateTo" class="required-validate-date-great-than-dateFrom" value="2007-09-02" />
<div id="advice-required-validate-date-dateFrom" class="validation-advice" style="display:none;"></div>
<div id="advice-required-validate-date-great-than-dateFrom-dateTo" class="validation-advice" style="display:block"></div>

2007-09-28 14:16 | Victor

# re: 扩展基于prototype的validation.js 回复 更多评论

@Victor
日期可以不需要验证的，有一个强大的日期控件，可以去看一下，可以自动纠错，而且可以自动限制日期的选择。http://blog.csdn.net/My97/archive/2007/06/29/1671264.aspx

2007-10-05 13:10 | Tang Anping

# re: 扩展基于prototype的validation.js [未登录] 回复 更多评论

這個我之前也在用...
功能上它的確是我用過之中最棒的一個,自動化,功能齊全..
但.....它不用class去封裝整個calendar..令到它的code經常跟其他 Js program發生相撞的情況..
當配合script.aculo.us時便會有err
我己經在
http://blog.csdn.net/My97/archive/2007/06/11/1647856.aspx#FeedBack 給了意見...vtsuper就是本人了

除了這個calendar還有沒有其他選擇??validation.js的方向又有解決方法嗎??

2007-10-05 13:41 | Victor

# re: 扩展基于prototype的validation.js 回复 更多评论

能够支持struts form的使用吗

2007-10-24 09:11 | 四三三

# re: 扩展基于prototype的validation.js [未登录] 回复 更多评论

现在Prototype.js已经升级到1.6.0_rc1了，我以前用的验证是基于1.5.0_rc2版本的，现在想把1.5.0_rc2升级到1.6.0_rc1，不过升级之后却不能运行，你们有遇到这个问题吗？是如何解决的？

2008-01-02 16:41 | Future

# re: 扩展基于prototype的validation.js [未登录] 回复 更多评论

应该与validation js无关,升级effects.js与prototype.js至相适应的版本即可

2008-01-02 16:47 | badqiu

# re: 扩展基于prototype的validation.js 回复 更多评论

顶一个。

2008-06-23 13:31 | jiankang

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问
相关文章: 新版本发布：基于prototype的表单验证框架，现正式更加为rapid-validation-v1.0 关于JavaScript的gzip静态压缩方法最简单的表单验证框架发布:validation2.0 扩展基于prototype的validation.js

badqiu