开发技术学习 »
前端设计 » formValidator select,猫东formValidator对SELECT(单选)控件处理的bug
formValidator select,猫东formValidator对SELECT(单选)控件处理的bug
最近一个项目用的是猫东写的formValidator验证插件,在处理选择框是出现了以下的情况:
在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)比较合理,我想这也应该是猫东推荐的方法,希望猫东把这个写在说明文档里,让更多人少走弯路。
再次感谢猫东开源如此好的插件!