jquery第七章.ppt

、 、 、 、 、 、 、 、 、 第七章.jQuery插件的使用和写法 主要学习内容 1、简单介绍并了解jQuery插件 2、编写jQuery插件 什么是插件 插件也称为扩展，是一种遵循一定规范的应用程序接口编写出来的程序 jQuery插件下载地址： / 1、jQuery表单验证插件-Validation Validation特点： a、内置验证规则：拥有必填、数字、E-mail、URL和信用卡号码等19 类内置验证规则 b、自定义验证规则：可以很方便地自定义验证规则 c、简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆 盖默认提示信息的功能 d、实时验证：可以通过keyup或blur事件触发验证，而不仅仅在表单 提交的时候验证 jquery.validate.js jquery.validate.js应用示例1： <input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2}}" /> <input id="cemail" name="email" size="25" class="{validate:{required:true, email:true}}" /> <input id="curl" name="url" size="25" value="" class="{validate:{url:true}}" /> <textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true}}" ></textarea> jQuery代码： <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"></script> <script src="lib/jquery.metadata.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#commentForm").validate({meta: "validate"});}); </script> jquery.validate.js应用示例2： <input id="cusername" name="username" size="25" /> <input id="cemail" name="email" size="25" /> <input id="curl" name="url" size="25" value="" /> <textarea id="ccomment" name="comment" cols="22" ></textarea> jQuery代码： <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#commentForm").validate({ rules: { username: {required: true, minlength: 2}, email: {required: true,email: true}, url:"url", comment: "required" } });}); </script> 总结： 该示例改写通过name属性来关联字段和验证规则的验证写法，可以实现行为和结构的分离。 具体编码步骤： 1）在 $("#commentForm").validate()方法中增加rules属性 2）通过每个字段的name属性值来匹配验证规则 3）定义验证规则：例如required:true， email:true， minlength:2等 英文->中文 <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jqu