Jquery学习心得

第四篇：课题_jQuery Validate验证框架详解

jQuery Validate验证框架详解

一、导入js库

注：<%=request.getContextPath()%>返回web项目的根路径。

二、默认校验规则

(1)、required:true

必输字段

(2)、remote:“remote-valid.jsp”

使用ajax方法调用remote-valid.jsp验证输入值(3)、email:true

必须输入正确格式的电子邮件(4)、url:true

必须输入正确格式的网址

(5)、date:true

必须输入正确格式的日期，日期校验ie6出错，慎用

(6)、dateISO:true

必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性(7)、number:true

必须输入合法的数字(负数，小数)(8)、digits:true

必须输入整数

(9)、creditcard:true

必须输入合法的信用卡号

(10)、equalTo:“#password”

输入值必须和#password相同

(11)、accept:

输入拥有合法后缀名的字符串（上传文件的后缀）(12)、maxlength:5

输入长度最多是5的字符串(汉字算一个字符)(13)、minlength:10

输入长度最小是10的字符串(汉字算一个字符)(14)、rangelength:[5,10]

输入长度必须介于 5 和 10 之间的字符串“)(汉字算一个字符)(15)、range:[5,10]

输入值必须介于 5 和 10 之间(16)、max:5

输入值不能大于5(17)、min:10

输入值不能小于10

三、默认的提示

messages: { required: ”This field is required.“, remote: ”Please fix this field.“, email: ”Please enter a valid email address.“, url: ”Please enter a valid URL.“, date: ”Please enter a valid date.“, dateISO: ”Please enter a valid date(ISO).“, dateDE: ”Bitte geben Sie ein g眉ltiges Datum ein.“, number: ”Please enter a valid number.“, numberDE: ”Bitte geben Sie eine Nummer ein.“, digits: ”Please enter only digits“, creditcard: ”Please enter a valid credit card number.“, equalTo: ”Please enter the same value again.“, accept: ”Please enter a value with a valid extension.“, maxlength: $.validator.format(”Please enter no more than {0} characters.“), minlength: $.validator.format(”Please enter at least {0} characters.“), rangelength: $.validator.format(”Please enter a value between {0} and {1} characters long.“), range: $.validator.format(”Please enter a value between {0} and {1}.“), max: $.validator.format(”Please enter a value less than or equal to {0}.“), min: $.validator.format(”Please enter a value greater than or equal to {0}.“)}，如需要修改，可在js代码中加入：

$.extend($.validator.messages, {

required: ”必选字段“，remote: ”请修正该字段“，email: ”请输入正确格式的电子邮件“，url: ”请输入合法的网址“，date: ”请输入合法的日期“，dateISO: ”请输入合法的日期(ISO).“，number: ”请输入合法的数字“，digits: ”只能输入整数“，creditcard: ”请输入合法的信用卡号“，equalTo: ”请再次输入相同的值“，accept: ”请输入拥有合法后缀名的字符串“，maxlength: $.validator.format(”请输入一个长度最多是 {0} 的字符串“)，minlength: $.validator.format(”请输入一个长度最少是 {0} 的字符串“)，rangelength: $.validator.format(”请输入一个长度介于 {0} 和 {1} 之间的字符串“)，range: $.validator.format(”请输入一个介于 {0} 和 {1} 之间的值“)，max: $.validator.format(”请输入一个最大为 {0} 的值“)，min: $.validator.format(”请输入一个最小为 {0} 的值“)});

推荐做法，将此文件放入messages_cn.js中，在页面中引入

四、使用方式

1、metadata用法，将校验规则写到控件中

<%@ page language=”java“ import=”java.util.*“ pageEncoding=”UTF-8“%> <%

String path = request.getContextPath();

String basePath = request.getScheme()+ ”://“ + request.getServerName()+ ”:“

+ request.getServerPort()+ path + ”/“;%>

“>

第五篇：jQuery的show,hide性能测试（xiexiebang推荐）

jQuery的show/hide性能测试

这篇文章是jQuery各种show/hide方式的性能测试。作者之所以测试这个源于Robert Duffy在SanFrancisco举行的jQuery大会上的一句话：“.hide()和.show()的执行速度会比直接改变css慢”。但由于未能找RobertDuffy问明原因，所以作者就自己去做了这个测试。下面的翻译并不是全文翻译，只节选了一些重点。

用作测试的是一个含有100个div的HTML页面，div带有class和一些内容。为了排除掉寻找这些div所花费的时间，所以把选择器$('div')缓存起来了。用作测试的jQuery版本是

1.4.2，所以测试结果也只是针对这个版本，在其他版本可能就不是这些结果了。测试的jQuery方法分别是：

.toggle()

.show()和.hide()

.css({'display':'none'})和.css({'display':'block'})

.addClass('hide')和.removeClass('hide')

改变

然后在javascript里：

1$('#special_hide').attr('disabled, 'true');

搞定！所有带有“special_hide”这个class的元素都显示出来了。要隐藏它们，你只需要……

1$('#special_hide').attr('disabled', 'false');

现在它们全部都隐藏了。总的javascript耗时在所有浏览器上都是0-1ms。你的javascript只是用来改变一个属性。当然，浏览器还是需要花费时间去重新渲染页面的，但是实际上你已经避免了javascript的处理时间。如果你调用了.toggle()，.hide()或者.css()这几个方法，那么这个方法就会失效。因为那几个方法会通过内联方式设置css样式，这些样式有更高的优先级。要重新使这个方法生效，只需调用.css('display', '')把内联的样式移除掉。这个方法同样需要花费你更多的精力，因为那需要去定义class，同时把这些class赋给页面上需要进行显示/隐藏的元素，但是如果你所要处理的元素数量是极其庞大的话，那么这也许是值得的。简要回顾一下，下面是改变元素显示状态的方法，按照最快到最慢的次序排列：

禁用/启用样式表

.css('display', ''),.css('display', 'none')

.addClass(),.removeClass()

.show(),.hide()

.toggle()

需要注意的是，在大多数的情况下，这些方法都足够的快了。当你要操作很大的jQuery集合时，那么.show()和.hide()方法在IE下就会变得很慢了，这是你可能要用addClass()或者.removeClass()方法。禁用/启用样式表的方法只有在很极端的情况下才有必要用到。本文由 牙科医院 http:/// 提供，转载请注明！