PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

Adophper » 前端设计 » formValidator select,猫东formValidator对SELECT(单选)控件处理的bug

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

此文被围观1855日期: 2013-09-09 分类 : 前端设计  标签:  ······
最近一个项目用的是猫东写的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)比较合理,我想这也应该是猫东推荐的方法,希望猫东把这个写在说明文档里,让更多人少走弯路。 再次感谢猫东开源如此好的插件!

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2018adophper.com All Rights Reserved.