一.摘要本系列文章将带您进入jquery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jquery也能在阅读中发现些许秘籍.
本文是介绍两个最常用的jquery插件. 分别用于表单验证和自动完成提示(类似google suggest).
二.前言研究别人的作品真是一件花时间而且痛苦的过程. 当然也和本人英文不好有关. 总觉得控件作者写了很多文档但是都不够系统, 需要深入研究很多的实例后才能了解作者的思路.所以学习和研究一个插件需要很高成本, 如果发现了bug并修复需要的成本也是未知数(本次我花了较少的时间解决了自动完成提示插件的一个中文bug, 但是如果复杂的bug就不会这么简单了.).
对于简单应用我首先推荐上文中的jquery ui. 但是jquery ui解决的问题有限. 使用jquery插件是我们最后的一个好办法---还算是好办法, 起码比自己开发要好吧?
很多jquery的插件编码异常优美, 看一看艺龙首页现在的城市输入框控件, 除了需要为输入框手工添加很多很多属性(onkeyup, onkeydown等等), 而且还不够通用, 占用服务器资源和网络资源.但是当初也是花费了很久的时间完成的作品.
站在巨人的肩膀上, 让我感觉写脚本和写设计c#程序一样, 都有高度和深度可以挖掘. 除了使用作者开发好的功能, 还可以学习如何开发和封装javascript控件. 看过优秀的jquery插件作者的代码和设计思想后, 常常自叹设计水平差距居然如此之大, 增加自认为脚本高手, 比较过后就是c#程序员和架构师之间的差距.
希望大家通过本章节介绍的两个插件, 除了学会如何使用,  还能够略微领悟到如何封装和设计javascript控件.
三.表单验证插件 validate在提交表单前常要对用户输入进行校验.asp.net的验证控件就是用于此目的, 可以同时进行客户端和服务器端验证. 但是验证控件并没有被所有项目采用. 而且在mvc项目中经常使用自己的客户端验证框架.
在比较了若干表单验证插件后, 决定采用validate插件. 因为其使用简单并且灵活.
插件首页:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
插件文档:
http://docs.jquery.com/plugins/validation
配置说明:
http://docs.jquery.com/plugins/validation/validate#options
1.应用实例实例效果:
实例代码:doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>html xmlns=http://www.w3.org/1999/xhtml>head id=head1 runat=server> title>jquery plugin - 表单验证插件实例 validate title> link rel=stylesheet type=text/css href=/jslib/jquery/themes/redmond/style.css%> /> script type=text/javascript src=/jslib/jquery/jquery-min-lastest.js>script> src=/jslib/jquery/ui/jquery-ui-all-min-lastest.js> src=/jslib/jquery/plugin/jquery.validate/jquery.validate.min.js> src=/jslib/jquery/plugin/jquery.validate/localization/messages_cn.js> if (false) {%> type=text/javascript> > /*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/ script> > body { font-size:12px; } /* form中显示文字的label */ .slabel { width:100px; display: -moz-inline-box; line-height: 1.8; display: inline-block; text-align:right; } /* 出错样式 */ input.error, textarea.error { border: solid 1px #cd0a0a; } label.error { color:#cd0a0a; margin-left:5px; } /* 深红色文字 */ .textred { color:#cd0a0a; }
表单验证 for=cname class=slabel>class=textred>* 姓名:
for=cemail class=slabel>class=textred>* e-mail:
for=curl class=slabel>网址:
for=ccomment class=slabel>class=textred>* 内容:
class=submit type=submit value=提交 />
if (false) {%>