http://my.oschina.net/mays/blog/647519
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吧。
分享到:
相关推荐
标题 "jQuery工作地点选择城市代码.zip" 暗示了这是一个使用jQuery库实现的JavaScript代码示例,用于创建一个功能类似于51job网站的工作地点选择器。51job是中国知名的职业招聘网站,其工作地点选择功能允许用户方便...
本篇将深入探讨如何利用jQuery实现分类信息的筛选过滤,尤其适用于处理不同类别信息的筛选,避免同类信息的重复显示。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作和Ajax交互...
重用元素搜索可以通过存储jQuery对象来实现,避免重复执行昂贵的DOM查询。例如,`var allItems = $("div.item");`和`var keepList = $("div#container1 div.item");`分别保存了所有满足条件的元素和特定容器内的元素...
如果图片URL已经在集合中,那么就跳过该图片,避免重复显示。 4. **事件绑定**:可以使用`.on()`方法绑定事件监听器,例如在`$(document).ready()`中初始化功能,确保所有图片加载后才进行去重操作。 5. **图片预...
2. **元素存储与复用**:存储jQuery对象可以避免重复的DOM查询,提高性能。例如,`var allItems = $("div.item");`和`var keepList = $("div#container1 div.item");`将常用元素保存在变量中,后续操作直接使用这些...
存储 jQuery 对象可以避免多次重复的 DOM 查询,提高性能。例如,先获取所有`.item`元素,然后根据需要再次过滤它们,如基于复选框的状态。 3. **使用 `has()` 检查元素**: `has()`方法允许检查元素是否包含特定...
JQuery允许我们保存选择器的结果,以便后续重复使用。这不仅提高了代码的可读性和维护性,还减少了重复执行相同查询带来的性能开销。 示例代码: ```javascript var allItems = $("div.item"); var keepList = $(...
`),可以在后续操作中避免重复查询DOM树,从而提高效率。例如,在处理大量复选框时,可以通过过滤这些存储的对象来更新界面状态,而不是每次都需要重新查找DOM元素。 ### 3. 使用`has()`检查元素包含情况 `has()`...
`,之后可以多次调用此变量,避免重复的DOM查询,提高性能。在需要时,可以使用`.filter()`进一步筛选元素,如根据复选框的状态调整保留的元素列表。 3. 使用`.has()`检查元素:`.has()`方法可用于检查元素是否包含...
jQuery的设计使它能够减少网络开发的复杂性,让开发者可以用更少的代码完成更多的任务。 **JSON数据格式** JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析...
为了避免重复查询,可以将常用的元素查询结果存储在一个变量中,以便后续使用。如示例代码所示: ```javascript var allItems = $("div.item"); var keepList = $("div#container1 div.item"); ``` 这样可以减少DOM...
`,然后在需要时直接引用这个变量,避免重复选择。 4. **利用链式操作**:jQuery的链式操作允许一次性执行多个方法,减少内存分配和函数调用。例如,`$("#element").addClass("active").fadeIn();`。 5. **使用子...
- 初始化Autocomplete:使用jQuery选择器定位到搜索框元素,调用`autocomplete()`方法,并传入配置对象,指定数据源、匹配函数等参数。 4. 自定义配置: - `source`:定义数据源,可以是数组、函数或URL。 - `...
缓存jQuery对象可以避免重复查询DOM,节省时间。如果多次使用相同的查询,如`$("#traffic_light")`,应将其存储在一个变量中,如`var trafficLight = $("#traffic_light");`,之后直接使用`trafficLight`变量。 4....
本文将详细讲解30个经典的jQuery代码开发技巧,这些技巧涵盖了常见的属性、方法以及元素的使用,对于提升jQuery代码的效率和实用性具有极大帮助。 1. **创建嵌套的过滤器**:通过`.filter(":not(:has(.selected))")...
`,可以避免重复查询DOM,提高性能。通过修改存储的集合,如`keepList`,实现动态过滤。 3. **has()方法**:`has()`用于检查元素是否包含特定的子元素或类,如`$("input").has(".email")`将选取包含`.email`类的`...
- **概述:** 通过缓存jQuery对象,可以在后续的操作中避免重复搜索DOM树,从而提高性能。 - **实现原理:** 使用变量存储初次搜索结果,再根据需要对这些结果进行筛选或修改。 - **代码示例:** ```javascript ...
2. **使用匿名函数**:将jQuery代码包裹在匿名函数中,避免污染全局作用域。 3. **模块化开发**:借助AMD(Asynchronous Module Definition)或CommonJS,实现库的模块化加载和隔离。 ### 五、jQuery生态系统 1. ...
尽管提供的部分内容似乎并不包含实际的教学内容,而是重复的网址链接,我们依然可以根据标题和描述来构建一个详细的关于jQuery基础教程的知识点概述。 ### jQuery基础教程03 #### 一、jQuery简介 - **定义**:...