从零开始学习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用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
微信小程序反编译的实现
Dec 10 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多个版本的分析解释
2011/07/21 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
php适配器模式简单应用示例
2019/10/23 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
使用axios实现上传图片进度条功能
2017/12/21 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
详解vue-cli3使用
2018/08/14 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
十个Python程序员易犯的错误
2015/12/15 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
使用Python处理BAM的方法
2018/09/28 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
10张动图学会python循环与递归问题
2021/02/06 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
生物制药毕业生自荐信
2013/10/16 职场文书
工作失职检讨书范文
2014/01/16 职场文书
终止合同协议书
2014/04/17 职场文书
详细介绍python类及类的用法
2021/05/31 Python
青岛市的收音机研制与生产
2022/04/07 无线电
MySQL存储过程及语法详解
2022/08/05 MySQL