0
点赞
收藏
分享

微信扫一扫

巧用 jQuery 筛选器,避免重复代码




jQuery的强大不用多说,但实际项目中,往往仅限于 jQuery("...").val() 之类的代替 document 取个值,设定个值而已。对于相对复杂的表单或者页面,如果不能使用合适的工具,将会极大降低效率,降低代码可读性。

项目中的代码是这样的:

html form(简化了的):

<input style="width:400px"  type="text" id="instName" name="instName" value="">
<input type="text" style="width:200px" id="busiLicenseNo" name="busiLicenseNo" value="">


...茫茫多的表单项(不仅仅是input,还包括各种select等)


JS验证代码:


$(document).ready(function () {
$('#instName').validatebox({
required: true,
validType: ['length[1,64]']
});
$('#busiLicenseNo').validatebox({
required: true,
validType: ['arab_num_char']
});
$('#busiLicenseAvailBegin').validatebox({
required: true,
validType: ['date']
});
...茫茫多的此类JS 对应每个待验证的表单项
});


如果JS一整屏甚至好几屏都是这个样子,相信看上去并不那么舒服,而且调试会很累人。那如何改进呢?



首先调整表单项,把相关的东西整在一起(高内聚):


<input style="width:400px"  type="text" name="instName" value="" data-valid='{"required":true,"validType":["length[1,64]"]}'>
<input type="text" style="width:200px" name="busiLicenseNo" value="" data-valid='{"required":true,"validType":["length[1,64]"]}'>


...各种表单项(不仅仅是input,还包括各种select等)


这里做了两个调整,1:去掉 id 属性,原因是在一个复杂页面中,并不能保证页面中后续加载的 dom 里不包含同样 id 的设置(此坑项目中已有人踩过),需要选定某个表单项可以用 jQuery("#form_id input[name=instName]") 这类选择器代替,这么做的好处是只要在表单内保证 name 唯一即可。2:增加 data-valid 属性,一般 data- 打头,名字可以随便起,与后面 js 对应即可,内容则为表单验证的 JSON 字符串。



修改 js 如下:


jQuery("#form_id [data-valid]").each(function(){
var validStr = jQuery(this).attr('data-valid');
if(validStr != ""){
jQuery(this).validatebox(JSON.parse(validStr));
}
});


如果还需要解释,那就去看 jQuery api吧。


举报

相关推荐

0 条评论