第四篇：課題_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');

現在它們全部都隱藏了?？偟膉avascript耗時在所有瀏覽器上都是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:/// 提供，轉載請注明！