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

[url]http://my.oschina.net/mays/blog/647519[/url]


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吧。