开发技术学习 »
前端设计 » 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）比较合理，我想这也应该是猫东推荐的方法，希望猫东把这个写在说明文档里，让更多人少走弯路。
再次感谢猫东开源如此好的插件！