当前位置: 主页 > 日志 > WEB UI >

猫东formValidator对SELECT(单选)控件处理的bug

// by redice 2010.04.11
// redice@163.com

在formValidator 用户手册中,对inputValidator有如下的一句说明:

“对select-one而言inputValidator里的参数min和max表示选择的索引号范围”

意思就是说,对于单选下拉列表来说,规则中设置的min及max值都表示的是被选中的option的索引值,而不是被选option的value。

例如,我们有如下的表单项:

<select name="select1" id="xueli">
    <option value="0">--请选择你的学历--</option>
    <option value="1">专科</option>
    <option value="2">本科</option>
    <option value="3">研究生</option>
    <option value="4">硕士</option>
    <option value="5">博士</option>
</select> 

我们设置了如下的验证规则:

$("#xueli").formValidator({onshow:"请选择你的学历",onfocus:"学历必须选择",oncorrect:"谢谢你的配合"}).inputValidator({min:1,onerror: "你是不是忘记选择学历了!"});

这条规则就限制了所选的option的索引值至少是1(第一个option的索引为0,第二个为1,依次类推),即不能选择第一个。在数据添加表单中,这条规则合情合理。但是如果是在数据编辑表单中,单选select已经有了默认值(用户可能不需要对已选数据进行修改)这时这个规则就有问题了。

例如,在编辑表单中,我们有如下的表单项:

<select name="select1" id="xueli">
    <option value="1" selected>专科</option>
    <option value="2">本科</option>
    <option value="3">研究生</option>
    <option value="4">硕士</option>
    <option value="5">博士</option>
</select> 

用户可能不会对该项进行修改,这样被选项的索引是0,就不符合规则的最小索引为1的约束,该表单项就会被验证取值无效。

解决方法有两个:

(1)    比较简单的方法,在select中增加一个无效的option,放在索引为0的位置上(起占位作用)。如下所示:

<select name="select1" id="xueli">
    <option value="0">--请选择你的学历--</option>
    <option value="1" selected>专科</option>
    <option value="2">本科</option>
    <option value="3">研究生</option>
    <option value="4">硕士</option>
    <option value="5">博士</option>
</select> 

这样默认备选项的索引就为1,符合规则的限制。

(2)    修改formValidator.js,使其对min和max取值解析为value而非index。

以ver3.2版为例,将546行,如下

if(sType=="select-one" || sType=="select-multiple"){setting.type = "size";}

修改为:

if(sType=="select-one" ){setting.type = "value";}
if(sType=="select-multiple"){setting.type = "size";}

这样,formValidator就会将规则中的min=1理解为select的最小取值为1。


总结:

其实这并不能算formValidator的一个bug,只能说是不太合理。采用方法(1)可以很简单地解决问题。在我们的项目中我采用了方法(2),因为方法(1)是在我写这篇文章的时候才想到的。昨天晕了,竟然没想到这个方法。还是改为方法(1)比较合理,我想这也应该是猫东推荐的方法,希望猫东把这个写在说明文档里,让更多人少走弯路。

再次感谢猫东开源如此好的插件!

[日志信息]

该日志于 2010-04-11 11:27 由 redice 发表在 redice's Blog ,你除了可以发表评论外,还可以转载 “猫东formValidator对SELECT(单选)控件处理的bug” 日志到你的网站或博客,但是请保留源地址及作者信息,谢谢!!    (尊重他人劳动,你我共同努力)
   
验证(必填):   点击我更换验证码

redice's Blog  is powered by DedeCms |  Theme by Monkeii.Lee |  网站地图 |  本服务器由西安鲲之鹏网络信息技术有限公司友情提供

返回顶部