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巧用Jquery巧用Jquery巧用Jquery
巧用jQuery源代码巧用jQuery源代码巧用jQuery源代码巧用jQuery源代码巧用jQuery源代码巧用jQuery源代码
jquery筛选器插件选项卡 css3制作一个漂亮的HTML5筛选容器插件选项卡
巧用jquery这本书的源代码
一款采用数组去重的方法过滤重复的水果图片效果代码,jQuery水果图片重复筛选去除代码。
jQuery筛选框文字查询代码是一款输入框查询文字筛选列表显示代码。 <title>jQuery筛选框文字查询代码 </title> <link rel="stylesheet" href="css/index.css?3.1.64"> </head> ...
<li data_arry='1'><img > <li data_arry='10'><img > <li data_arry='2'><img > <li data_arry='3'><img > ... 一款采用数组去重的方法过滤重复的水果图片效果代码,jQuery水果图片重复筛选去除代码。
jquery商品分类筛选效果代码是一款文字标签筛选效果代码。
jquery代码制作商城商品列表商品筛选功能 jquery代码制作商城商品列表商品筛选功能
jquery 筛选器 制作类似雅虎饲料中阅读器小工具 jquery 筛选器 制作类似雅虎饲料中阅读器小工具
jquery滑动效果带进度条滑动筛选器代码
开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...
jQuery带过滤功能列表分类筛选插件代码
jquery筛选器插件选项卡HTML5 css3制作筛选容器选项卡
jQuery多条件分类筛选代码是一款点击选择全部分类,支持单选和多条件筛选效果代码。
一款实用的jQuery表格数据条件筛选代码,点击筛选按钮弹出设置窗口,根据需要进行勾选来显示表格数据。
jquery筛选插件,多条件筛选代码,淘宝商品筛选代码jquery筛选插件,多条件筛选代码,淘宝商品筛选代码jquery筛选插件,多条件筛选代码,淘宝商品筛选代码jquery筛选插件,多条件筛选代码,淘宝商品筛选代码
jQuery带筛选的垂直导航菜单展开收缩代码 jQuery带筛选的垂直导航菜单展开收缩代码
一款多终端自适应jQuery仿淘宝商品多条件筛选代码,可以用在所有多分类筛选的网站之上。