随笔-12  评论-820  文章-0  trackbacks-17
2008-05-21已经发布到原来的那篇文章上去了.
http://www.cnblogs.com/wzmaodong/archive/2008/01/11/1034901.html


新版本晚上打完羽毛球就发布!
http://www.yhuan.com/formvalidator/index.html
这次更新的主要内容
1、增加对select-multiple的验证的支持,到现在为止插件已经支持所有控件的验证
用InputValidator来校验这种类型
属性 属性名称 默认值 详细解释
type 比较类型 "size" (对select无效)
"size":表示比较长度
"number":数值型比较
"string":字符型比较
min 最小长度/值 0 默认数值型。如果进行字符比较,请收入字符型 
对select-multiple而言InputValidator里的参数min和max表示选择的个数
max 最大长度/值 99999999999 同上
onerror 发生错误的提示 "输入错误" 为空者不显示。
onerrormin 比min属性小的提示 null 当用户输入的值比min属性小的时候的错误提示
onerrormax 比max属性大的提示 null 当用户输入的值比max属性大的时候的错误提示

示例代码:具体请见demo1里新增加的示例
$("#selectmore").formValidator({onshow:"按住CTRL可以多选",onfocus:"按住CTRL可以多选,至少选择2个",oncorrect:"谢谢你的合作"}).InputValidator({min:2,onerror:"至少选择2个"});

2、增加对checkbox设置多个默认值的支持。具体请见demo1里的选择兴趣爱好2里的代码
$("input:checkbox[@name='checkbox8']").formValidator({tipid:"test2Tip",onshow:"请选择你的兴趣爱好(至少选择2个,最多选择3个)",onfocus:"你至少选择2个,最多选择3个",oncorrect:"恭喜你,你选对了",defaultvalue:["7","8"]}).InputValidator({min:2,max:3,onerror:"你选的个数不对(至少选择2个,最多选择3个)"});
注意此时的defaultvalue必须是个Array
posted on 2008-05-21 13:02 猫冬 阅读(3488) 评论(53)  编辑 收藏

评论:
#1楼  2008-05-21 13:45 | 瑞克梅塔      
期待试用。。。。
  回复  引用  查看    
#2楼  2008-05-21 13:48 | onelove [未注册用户]
打羽毛球这事挺开心的,如果有MM陪的话。
  回复  引用    
#3楼  2008-05-21 13:52 | airwolf2026      
看看
  回复  引用  查看    
#4楼  2008-05-21 14:21 | 百度HI [未注册用户]
这个很有意义,希望楼主尽快放出来。。。
  回复  引用    
#5楼  2008-05-21 16:02 | Ben22 [未注册用户]
--引用--------------------------------------------------
onelove: 打羽毛球这事挺开心的,如果有MM陪的话。
--------------------------------------------------------
如果同时陪同打羽毛球的MM穿的是短裙的话更好..
  回复  引用    
#6楼  2008-05-21 16:12 | gudufy [未注册用户]
建议整合成服务器控件,这样调用起来就方便多了
  回复  引用    
#7楼  2008-05-21 16:56 | 簡簡單單..      
如何试用?
  回复  引用  查看    
#8楼 [楼主] 2008-05-21 17:04 | 猫冬      
先放个连接给大家看以下
http://www.yhuan.com/formvalidator/index.html
  回复  引用  查看    
#9楼  2008-05-21 17:08 | yjm1102 [未注册用户]
非常好用的东西
  回复  引用    
#10楼  2008-05-21 17:20 | Jim~      
支持国产jQuery插件 看了Demo不错呀 你还用了tabs 呵呵~~
  回复  引用  查看    
#11楼  2008-05-21 17:40 | 痴情客      
--引用--------------------------------------------------
onelove: 打羽毛球这事挺开心的,如果有MM陪的话。
--------------------------------------------------------

其实做什么事都挺开心的 ,如果有MM陪的话。
  回复  引用  查看    
#12楼  2008-05-21 20:37 | Leem      
如果陪的MM是个恐龙的话,就不是这样了.

最好做成服务器控件,集成服务器端验证.如果只是客户端验证,把js禁用掉,那就over了,服务器端人工验证起来比较麻烦.
  回复  引用  查看    
#13楼 [楼主] 2008-05-21 20:44 | 猫冬      
@Leem
服务器端的校验----这个我写了,但不是控件,是一个类
主要实现了InputValidator、CompareValidator、RegexValidator三类校验方式,用法跟js的一样,也是链写的。
有空发上来给大家看一下
  回复  引用  查看    
#14楼 [楼主] 2008-05-21 21:19 | 猫冬      
插件已经更新!
还是在老的那篇文章
http://www.cnblogs.com/wzmaodong/archive/2008/01/11/1034901.html
  回复  引用  查看    
#15楼  2008-05-22 12:01 | youxiang [未注册用户]
很不错,支持~~
  回复  引用    
#16楼  2008-05-23 08:57 | xjb      
嗯,不错,每次最麻烦就是做客户端的数据验证了
  回复  引用  查看    
#17楼 [楼主] 2008-05-23 09:31 | 猫冬      
@youxiang
@xjb
谢谢你们的支持
  回复  引用  查看    
#18楼  2008-05-28 10:43 | gyhgc [未注册用户]
请问楼主,我用这个插件,jsp页为什么必须是<%@ page language="java" pageEncoding="UTF-8"%>
可不可以是GBK呢?我用GBK报错。
  回复  引用    
#19楼 [楼主] 2008-05-28 11:31 | 猫冬      
@gyhgc
你好,乱码的问题,你在申明js的时候,这么写
<script type="text/javasctipt" src="formValidator.js" charset="UTF-8"></script>

我会在将来的版本中,修正js的引用方式
  回复  引用  查看    
#20楼  2008-05-28 14:29 | gyhgc [未注册用户]
真诚的感谢楼主提供的帮助!
  回复  引用    
#21楼  2008-05-28 16:19 | gyhgc [未注册用户]
楼主您好:
我在使用如下方式提交时,alert("ok");没有执行。页面也不能提交,请问如何解决
<input type="button" value="提交" onclick="save();">
<script>
function save(){
return jQuery.formValidator.PageIsValid();
alert("ok");
}
</script>
  回复  引用    
#22楼  2008-05-28 16:41 | gyhgc [未注册用户]
楼主您好:
我又改成submit方式提交,提交页面表单倒是可以。但是当验证时,比如alert弹出“xx不能为空,请确认”。点击确定,同时表单页提交了。正常应该表单不提交,焦点到为空的text
<input type="submit" value="提交" onclick="save();">
<script>
function save(){
return jQuery.formValidator.PageIsValid();
alert("ok");
}
</script>

  回复  引用    
#23楼 [楼主] 2008-05-28 21:51 | 猫冬      
@gyhgc
首先绝对不会出现你说的情况。
插件在默认的情况下,是不会弹出错误提示的(想弹出提示,可以按下面的做法做),只会让第一个发生错误的控件获得焦点。

关于提交的事情,你可以认真看一下faq.html里的提问和回答。
或者你看一下demo1里的代码,里面有很多可以抄的代码


问:我想在表单没有校验通过的时候,弹出第一个没有校验通过元素的错误信息,如何实现?
答:onError有2个参数:第一个“第一个没有校验通过元素的错误信息”;第二个“第一个没有校验通过元素对象”;代码如下设置:
jQuery.formValidator.initConfig({onError:function(msg){alert(msg);}})。
  回复  引用  查看    
#24楼  2008-05-29 08:45 | gyhgc [未注册用户]
楼主您好:
/**我在使用如下方式提交时,alert("ok");没有执行。页面也不能提交,请问如何解决
<input type="button" value="提交" onclick="save();">
<script>
function save(){
return jQuery.formValidator.PageIsValid();
alert("ok");
}
</script>
*************************************************/
是我的代码写的不对,应该写成:
<script>
function save(){
if(jQuery.formValidator.PageIsValid()){
alert("ok");
}
}
</script>
return当然不对了。

  回复  引用    
#25楼 [楼主] 2008-05-29 10:29 | 猫冬      
@gyhgc
你最好参考demo1里的代码来写!这样不大容易出错
方法是:代码拷贝过来改.
改过几个,也就知道怎么用了
  回复  引用  查看    
#26楼  2008-05-29 10:59 | gyhgc [未注册用户]
楼主你好:
我可以新建一个js文件,用
document.write("<script src=../js/formvalidator/jquery_last.js></script>");
document.write("<script src../js/formvalidator/formValidator.js></script>");
document.write("<script src=../js/formvalidator/formValidatorRegex.js></script>");
这种方式把他们合并到一个文件中。这样我在jsp页面中只需要引进我自己写的js文件就可以了。
问题1:这种方式可以吗?会不会有问题?如果可以,引入文件的正确先后顺序是?
问题2:在项目的开发中,建议对js使用合并操作吗?有什么样的优点和缺点呢,请指教。
  回复  引用    
#27楼 [楼主] 2008-05-29 12:15 | 猫冬      
@gyhgc
你好!自己写的还是别人写的js,我倒认为不重要,需要就引进来!
在项目的开发中,我个人不建议对js合并操作.因为js文件是根据功能来划分的,没有必要合并
  回复  引用  查看    
#28楼  2008-05-29 14:40 | gyhgc [未注册用户]
猫冬你好:
我要用jquery实现一个ajax功能,几个标签的keyup事件都执行一段相同的代码(公共函数),我怎么写啊?我现在最笨的写法:
$(("#password") ).keyup(function() {
$.ajax({
type: "POST",
url: "../maintain/customer_getName.action",
: "user_name="+$("#user_name").val(),
success: function(msg){
if(msg == "yes"){
alert("用户名已存在,请重新输入");
$("#user_name").val("");
$("#password").val("");
$("#repassword").val("");
$("#user_name").focus();
}
}
});
});
$(("#username") ).keyup(function() {
$.ajax({。。。。。。。。。。。。。
  回复  引用    
#29楼 [楼主] 2008-05-29 18:47 | 猫冬      
@gyhgc
直接用逗号
$(("#password,#username") ).keyup(function() {
$.ajax({
type: "POST",
url: "../maintain/customer_getName.action",
: "user_name="+$("#user_name").val(),
success: function(msg){
if(msg == "yes"){
alert("用户名已存在,请重新输入");
$("#user_name").val("");
$("#password").val("");
$("#repassword").val("");
$("#user_name").focus();
}
}
});
});
  回复  引用  查看    
#30楼  2008-05-30 13:55 | gyhgc [未注册用户]
多谢楼主的帮助,不胜感激!还有一个问题。
<s:iterator value="#request.per_data">
<tr>
<td>&nbsp;<s:property value="xh"/></td>
<td>&nbsp;<s:property value="top_org_name"/></td>
<td>&nbsp;<s:property value="id"/></td>
<td>&nbsp;<s:property value="duty_name"/></td>
<td><a href="javascript:operate('edit','<s:property value="id" />')">
修改</a></td>
<td><a href="javascript:operate('delete','<s:property value="id" />')">
删除 </a></td>
</tr>
</s:iterator>
以上是一个现实数据的列表信息,现在我想把修改和删除都改成jquery方式,把修改的<a>连接改成按纽形式如下
<input type="button" id="edit" value="修改">
js如下:
$("#edit").click(function() {
$("#id").val(.....................重点是这里如何获得要修改记录的id值);
$("#listform")[0].action="../maintain/duty_read.action";
$("#listform")[0].submit();
});
问题:怎么写按纽的部分和jquery的部分代码,把要修改对应记录的id在jquery中获得到?
  回复  引用    
#31楼  2008-05-30 14:26 | gyhgc [未注册用户]
楼主你好:
问题1:把你的3个js引进jsp中,对于本jsp页使用正式的jquery会有影响吗,不会冲突吧?
问题2:引入了你的jquery_last.js是不是就不需要引入正式版本的jquery了,就可以使用jquery了?

  回复  引用    
#32楼 [楼主] 2008-05-30 22:00 | 猫冬      
@gyhgc
虽然看不懂你的代码,但是你要给form修改属性,你可以这样
$("#listform").attr("action","../maintain/duty_read.action");
提交直接掉jquery的方法
$("#listform").submit();

  回复  引用  查看    
#33楼 [楼主] 2008-05-30 22:02 | 猫冬      
@gyhgc
插件的代码已经避免了于$符号的冲突,其它js都没有关系只是普通的js文件。
jquery_last我这个版本是1.2的,而且是没有压缩过的,你可以下一个最新版本,压缩过的。新版本1.2.4。
  回复  引用  查看    
#34楼  2008-06-02 14:32 | gyhgc [未注册用户]
楼主你好:

我理解你的意思是,我只要下载jquery最新版本的jquery.js,把它引入到我的jsp中,就不需要引入你的jquery_last了,对不?
  回复  引用    
#35楼 [楼主] 2008-06-02 14:45 | 猫冬      
@gyhgc
对.
  回复  引用  查看    
#36楼  2008-06-03 11:53 | gyhgc [未注册用户]
猫冬你好!

$("#duty_name").formValidator({onshow:"",onfocus:"职务名称不能为空",oncorrect:"职务名称合法"}).InputValidator({min:1,max:50,onerror:"职务名称不能为空,请确认"});

我以上写法不能验证用户输入空格,如果在上面的代码中加上trim呢?或者采用其他写法进行解决

提示信息改为:职务名称不能为空且不能输入空格

  回复  引用    
#37楼 [楼主] 2008-06-03 12:20 | 猫冬      
@gyhgc
肯定不会有这种bug,你可以看一下demo1里的密码等控件的验证
自己仔细查一下代码吧
  回复  引用  查看    
#38楼  2008-06-03 12:52 | gyhgc [未注册用户]
猫冬你好!

你的demo1中确实有这种bug,比如 你的年龄: 输入两个空格。还提示我恭喜你,你输对了


  回复  引用    
#39楼  2008-06-03 13:32 | gyhgc [未注册用户]
猫冬你好!
如果用这个属性:

regexp:"notempty" 测试是不能输入任何空格的,包括两个字符串之间。
我想这样不太合理吧,有的时候需要这种情况,但也需要一个功能去掉两边的空格的啊?
我解决的方法是:
$("#duty_name").formValidator({onshow:"",onfocus:"职务名称不能为空",oncorrect:"职务名称合法"}).InputValidator({min:1,max:50,onerror:"职务名称不能为空,请确认"}).FunctionValidator({fun:function(val,elem){
if(trim(val) != ""){
return true;
}else{
return "不能仅仅输入空格"
}
}});

function trim(str){
return str.replace(/^\ +|\ +$/ig,"");
}

但我觉得不太好,还是楼主给我一个解决办法吧。
  回复  引用    
#40楼 [楼主] 2008-06-03 21:49 | 猫冬      
@gyhgc
不得不承认,确实存在这个bug,上次升级的时候,为了精简代码,判断前后顺序写错了。
晚上马上更新这个bug。更新好了,我会留言
  回复  引用  查看    
#41楼 [楼主] 2008-06-03 21:55 | 猫冬      
@gyhgc
你要的功能,我建议写个外部函数,用FunctionValidator来调用。
或者写正则校验一下也可以。
插件暂时不提供这种(有针对性的)校验
  回复  引用  查看    
#42楼  2008-06-04 00:10 | 無尽海      
感觉应该提供一个用name做选择器的方式
jquery的表单提交插件
是用name来序列化参数的
这样就要同时设置id和name
麻烦啊
  回复  引用  查看    
#43楼 [楼主] 2008-06-04 11:50 | 猫冬      
@無尽海
你说的form.js,之所以用name来序列化参数,是为了那些checkbox,radio等控件
  回复  引用  查看    
#44楼  2008-06-04 16:17 | gyhgc [未注册用户]
猫冬:
问题1:你说的哪个bug还没有更新吧,更新了及时通知一下。
问题2:如下这条语句
$("#menu_level option").remove(); // remove option

我如何拆分成两个语句写:
1.var menu = $("#menu_level");
2.怎么写啊?请指教
  回复  引用    
#45楼 [楼主] 2008-06-04 20:57 | 猫冬      
@gyhgc
你在38楼的提问,这个bug已经在昨天更新了

关于option的操作,网上有很多代码,自己找一下吧!
  回复  引用  查看    
#46楼  2008-06-05 09:03 | gyhgc [未注册用户]
猫冬你好:
问题1:ip4:验证有bug ,比如输入10.5.31.123 合法的IP但还是报错。
问题2:密码框中输入六个空格,也认为是合法的吗?
问题3:对于编辑框不能为空,必须输入的验证还是有bug啊?没有改正啊。
比如我要求这个编辑框不能为空,但是我输入几个空格还提示我,合法。
  回复  引用    
#47楼 [楼主] 2008-06-05 10:31 | 猫冬      
@gyhgc
问题1:你先用自己认为正确的正则表示式先
问题2:别人愿意用6个空格当密码,我有什么办法!!!!!
问题3:不能为空=不能全空!!!!输入几个空格后,是不是有内容了啊!!!!
  回复  引用  查看    
#48楼  2008-06-05 11:13 | gyhgc [未注册用户]
猫冬你好:

问题3:不能为空=不能全空!!!!输入几个空格后,是不是有内容了啊!!!!

我觉得问题3,您这样解释有些牵强,道理是这样的道理,但是不符合实际的应用。
  回复  引用    
#49楼 [楼主] 2008-06-05 11:39 | 猫冬      
@gyhgc
问题是,插件怎么知道你的业务允不允许空格,还是左边允许空格,或者右边空格,还是中间空格!!所以这种针对性的,是情况很复杂,所以插件不做这个功能,否则插件就做杂了
  回复  引用  查看    
#50楼  2008-06-05 16:47 | gyhgc [未注册用户]
猫冬你好!

我觉得你说的很有道理。毕竟您考虑的比较多,处在一个高度看问题。开发一个公用的插件。

但是我觉得对于我提出的问题3,不是特别应该有针对性,应该是在软件开发中最普遍性的一个问题。您可以增加一个可选的属性来把这个问题解决了,完善你的插件功能。而不能就这样丢弃这个功能不做,或者由使用者在进行扩展。

小弟说的不对的地方,见谅。
  回复  引用    
#51楼 [楼主] 2008-06-05 20:38 | 猫冬      
@gyhgc
说实话,我很感谢你们在提建议的网友!就是因为你们,插件才能不断的完善,就是因为你们,才是我不断修改插件的动力。

不过我修改插件或者说增加插件功能的基本原则:只做表单校验,不做别的功能;尽量在老的框架上改动(自认为现在这个框架搭的挺好,目前没有发现什么不能实现的功能),write less, do more.

不过我个人认为问题3,已经超出表单校验的范围,具有一定的针对性(是实现某个判断)。但是这种需求完全可以通过FunctionValidator或者RegexValidator来实现
  回复  引用  查看    
#52楼 [楼主] 2008-06-05 20:48 | 猫冬      
关于问题3,你可以用RegexValidator来验证输入的格式,再判断长度!
  回复  引用  查看    
#53楼  2008-06-06 11:29 | gyhgc [未注册用户]
猫冬你好:

希望你的越做越好,我们使用越来越方便,也从中学到很多东西!

马上端五了,祝端午快乐!
  回复  引用    

标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-05-22 18:11 编辑过


相关链接: