从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件


Posted in Javascript onFebruary 23, 2011

一.摘要

本系列文章将带您进入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插件. 因为其使用简单并且灵活.

插件首页:

Javascript 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
JQuery中$之选择器用法介绍
Apr 05 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
快速入门Vue
Dec 19 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
JS实现吸顶特效
Jan 08 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 #Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 #Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 #Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 #Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 #Javascript
jQuery的学习步骤
Feb 23 #Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 #Javascript
You might like
php删除文本文件中重复行的方法
2015/04/28 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python随手笔记之标准类型内建函数
2015/12/02 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
新农村建设汇报材料
2014/08/15 职场文书
如何写通讯稿
2015/07/22 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python