jQuery Validate驗(yàn)證框架詳解_第1頁(yè)
jQuery Validate驗(yàn)證框架詳解_第2頁(yè)
jQuery Validate驗(yàn)證框架詳解_第3頁(yè)
jQuery Validate驗(yàn)證框架詳解_第4頁(yè)
jQuery Validate驗(yàn)證框架詳解_第5頁(yè)
已閱讀5頁(yè)，還剩7頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、jQuery Validate驗(yàn)證框架詳解(此處標(biāo)題超鏈接) 鏈接地址： 一、導(dǎo)入js庫(kù) <script type="text/javascript"src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript"src="<%=path %>/validate/jquery.validate.min.js"></script>注：<

2、;%=request.getContextPath() %>返回web項(xiàng)目的根路徑。二、默認(rèn)校驗(yàn)規(guī)則(1)、required:true 必輸字段(2)、remote:"remote-valid.jsp" 使用ajax方法調(diào)用remote-valid.jsp驗(yàn)證輸入值(3)、email:true 必須輸入正確格式的電子郵件(4)、url:true 必須輸入正確格式的網(wǎng)址(5)、date:true 必須輸入正確格式的日期，日期校驗(yàn)ie6出錯(cuò)，慎用(6)、dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗(yàn)證格式

3、，不驗(yàn)證有效性(7)、number:true 必須輸入合法的數(shù)字(負(fù)數(shù)，小數(shù))(8)、digits:true 必須輸入整數(shù)(9)、creditcard:true 必須輸入合法的信用卡號(hào)(10)、equalTo:"#password" 輸入值必須和#password相同(11)、accept: 輸入擁有合法后綴名的字符串（上傳文件的后綴）(12)、maxlength:5 輸入長(zhǎng)度最多是5的字符串(漢字算一個(gè)字符)(13)、minlength:10 輸入長(zhǎng)度最小是10的字符串(漢字算一個(gè)字符)(14)、rangelength:5,10 輸入長(zhǎng)度必須介于 5 和 10 之間的字符

4、串")(漢字算一個(gè)字符)(15)、range:5,10 輸入值必須介于 5 和 10 之間(16)、max:5 輸入值不能大于5(17)、min:10 輸入值不能小于10三、默認(rèn)的提示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:

5、"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"

6、;,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

7、("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

8、0."),min: $.validator.format("Please enter a value greater than or equal to 0."),如需要修改，可在js代碼中加入：$.extend($.validator.messages, required: "必選字段",remote: "請(qǐng)修正該字段",email: "請(qǐng)輸入正確格式的電子郵件",url: "請(qǐng)輸入合法的網(wǎng)址",date: "請(qǐng)輸入合法的日期",dateISO: "請(qǐng)輸入

9、合法的日期 (ISO).",number: "請(qǐng)輸入合法的數(shù)字",digits: "只能輸入整數(shù)",creditcard: "請(qǐng)輸入合法的信用卡號(hào)",equalTo: "請(qǐng)?jiān)俅屋斎胂嗤闹?quot;,accept: "請(qǐng)輸入擁有合法后綴名的字符串",maxlength: $.validator.format("請(qǐng)輸入一個(gè)長(zhǎng)度最多是 0 的字符串"),minlength: $.validator.format("請(qǐng)輸入一個(gè)長(zhǎng)度最少是 0 的字符串"),ra

10、ngelength: $.validator.format("請(qǐng)輸入一個(gè)長(zhǎng)度介于 0 和 1 之間的字符串"), range: $.validator.format("請(qǐng)輸入一個(gè)介于 0 和 1 之間的值"),max: $.validator.format("請(qǐng)輸入一個(gè)最大為 0 的值"),min: $.validator.format("請(qǐng)輸入一個(gè)最小為 0 的值");推薦做法，將此文件放入messages_cn.js中，在頁(yè)面中引入<script type="text/javascript&qu

11、ot;src="<%=path %>/validate/messages_cn.js"></script> 四、使用方式1、metadata用法，將校驗(yàn)規(guī)則寫(xiě)到控件中<% page language="java" import="java.util.*" pageEncoding="UTF-8"%><% String path = request.getContextPath();String basePath = request.getScheme() + &quo

12、t;:/" + request.getServerName() + ":" + request.getServerPort() + path + "/"%><!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"><html><head><base href="<%=basePath%>"><title>jQuery Validate驗(yàn)證框架詳解-metadata用法

13、</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2

14、,keyword3"> <meta http-equiv="description" content="This is my page"><script type="text/javascript"src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript"src="&

15、lt;%=request.getContextPath()%>/validate/jquery.validate.min.js"></script><script type="text/javascript"src="<%=request.getContextPath()%>/validate/jquery.metadata.min.js"></script><script type="text/javascript"src="<%=reque

16、st.getContextPath()%>/validate/messages_zh.js"></script> <script type="text/javascript">$(function() $("#myform").validate(); );</script></head><body><form id="myform" method="post" action=""><p>&l

17、t;label for="myname">用戶名：</label><!- id和name最好同時(shí)寫(xiě)上 -><input id="myname" name="myname" class="required" /></p><p><label for="email">E-Mail：</label><input id="email" name="email" class

18、="required email" /> </p><p><label for="password">登陸密碼：</label><input id="password" name="password" type="password"class="required:true,minlength:5" /></p><p><label for="confirm_password&

19、quot;>確認(rèn)密碼：</label><input id="confirm_password" name="confirm_password"type="password"class="required:true,minlength:5,equalTo:'#password'" /> </p><p><label for="confirm_password">性別：</label><!- 表示必須選

20、中一個(gè) -><input type="radio" id="gender_male" value="m" name="gender" class="required:true" /><input type="radio" id="gender_female" value="f" name="gender"/> </p><p><label for="

21、confirm_password">愛(ài)好：</label><!- checkbox的minlength表示必須選中的最小個(gè)數(shù),maxlength表示最大的選中個(gè)數(shù),rangelength:2,3表示選中個(gè)數(shù)區(qū)間 -><input type="checkbox" id="spam_email" value="email"name="spam" class="required:true, minlength:2" /><input type=

22、"checkbox" id="spam_phone" value="phone"name="spam" /><input type="checkbox" id="spam_mail" value="mail" name="spam" /></p><p><label for="confirm_password">城市：</label><select

23、 id="jungle" name="jungle" title="Please select something!" class="required:true"><option value=""></option><option value="1">廈門</option><option value="2">泉州</option><option value="3&

24、quot;>Oi</option></select></p><p><input class="submit" type="submit" value="立即注冊(cè)" /></p></form></body></html>使用class=""的方式，必須引入包：jquery.metadata.js；可以使用如下的方法，修改提示內(nèi)容：class="required:true,minlength:5,

25、messages:required:'請(qǐng)輸入內(nèi)容'"；在使用equalTo關(guān)鍵字時(shí)，后面的內(nèi)容必須加上引號(hào)，如下代碼：class="required:true,minlength:5,equalTo:'#password'"。2、將校驗(yàn)規(guī)則寫(xiě)到j(luò)s代碼中<% page language="java" import="java.util.*" pageEncoding="UTF-8"%><% String path = request.getContextP

26、ath();String basePath = request.getScheme() + ":/" + request.getServerName() + ":" + request.getServerPort() + path + "/"%><!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"><html> <head> <base href="<%=basePath%>&qu

27、ot;><title>jQuery Validate驗(yàn)證框架詳解</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywo

28、rds" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"><script type="text/javascript"src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"></script> <script ty

29、pe="text/javascript"src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"></script><script type="text/javascript">$(function()var validate = $("#myform").validate(debug: true, /調(diào)試模式取消submit的默認(rèn)提交功能/errorClass: "label.erro

30、r", /默認(rèn)為錯(cuò)誤的樣式類為：errorfocusInvalid: false, /當(dāng)為false時(shí)，驗(yàn)證無(wú)效時(shí)，沒(méi)有焦點(diǎn)響應(yīng) onkeyup: false,submitHandler: function(form) /表單提交句柄,為一回調(diào)函數(shù)，帶一個(gè)參數(shù)：formalert("提交表單");form.submit(); /提交表單 , rules: myname:required:true , email:required:true,email:true , password:required:true, rangelength:3,10 , confirm

31、_password: equalTo:"#password" , messages: myname:required:"必填" , email:required:"必填",email:"E-Mail格式不正確" , password:required: "不能為空",rangelength: $.format("密碼最小長(zhǎng)度:0, 最大長(zhǎng)度:1。") , confirm_password:equalTo:"兩次密碼輸入不一致" ); );</scri

32、pt></head><body><form id="myform" method="post" action=""><p><label for="myname">用戶名：</label><!- id和name最好同時(shí)寫(xiě)上 -><input id="myname" name="myname" /></p><p><label for="em

33、ail">E-Mail：</label><input id="email" name="email" /></p><p><label for="password">登陸密碼：</label><input id="password" name="password" type="password" /> </p><p><label for="

34、confirm_password">確認(rèn)密碼：</label><input id="confirm_password" name="confirm_password" type="password" /></p><p><input class="submit" type="submit" value="立即注冊(cè)" /> </p></form></body></

35、html>五、常用方法及注意問(wèn)題1、用其他方式替代默認(rèn)的submit $(function() $("#signupForm").validate( submitHandler:function(form) alert("submit!"); form.submit(); );); 可以設(shè)置validate的默認(rèn)值，寫(xiě)法如下： $.validator.setDefaults( submitHandler: function(form) alert("submit!"); form.submit(); );如果想提交表單，需要使用

36、form.submit()，而不要使用$(form).submit()2、debug，只驗(yàn)證不提交表單如果這個(gè)參數(shù)為true，那么表單不會(huì)提交，只進(jìn)行檢查，調(diào)試時(shí)十分方便$(function()$("#signupForm").validate(debug:true);); 如果一個(gè)頁(yè)面中有多個(gè)表單都想設(shè)置成為debug，用$.validator.setDefaults( debug: true)3、ignore：忽略某些元素不驗(yàn)證ignore: ".ignore"4、更改錯(cuò)誤信息顯示的位置errorPlacement：CallbackDefault:

37、把錯(cuò)誤信息放在驗(yàn)證的元素后面指明錯(cuò)誤放置的位置，默認(rèn)情況是：error.appendTo(element.parent();即把錯(cuò)誤信息放在驗(yàn)證的元素后面errorPlacement: function(error, element) error.appendTo(element.parent();/示例<tr><td class="label"><label id="lfirstname" for="firstname">FirstName</label></td><

38、td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td><td class="status"></td></tr><tr><td style="padding-right: 5px;"><input

39、id="dateformat_eu" name="dateformat" type="radio" value="0" /> <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label> </td><td style="padding-left: 5px;"><input id="dateformat_am" n

40、ame="dateformat" type="radio" value="1" /> <label id="ldateformat_am" for="dateformat_am">02/14/07</label> </td><td></td></tr><tr><td class="label">&nbsp;</td><td class="f

41、ield" colspan="2"><div id="termswrap"><input id="terms" type="checkbox" name="terms" /><label id="lterms" for="terms">I have read and accept the Terms of Use.</label></div></td></tr&g

42、t; errorPlacement: function(error, element) if (element.is(":radio") error.appendTo(element.parent().next().next(); else if (element.is(":checkbox") error.appendTo(element.next(); else error.appendTo(element.parent().next(); 代碼的作用是：一般情況下把錯(cuò)誤信息顯示在<td class="status">

43、</td>中，如果是radio顯示在<td></td>中，如果是checkbox顯示在內(nèi)容的后面errorClass：String Default: "error"指定錯(cuò)誤提示的css類名，可以自定義錯(cuò)誤提示的樣式errorElement：String Default: "label"用什么標(biāo)簽標(biāo)記錯(cuò)誤，默認(rèn)的是label你可以改成emerrorContainer：Selector顯示或者隱藏驗(yàn)證信息，可以自動(dòng)實(shí)現(xiàn)有錯(cuò)誤信息出現(xiàn)時(shí)把容器屬性變?yōu)轱@示，無(wú)錯(cuò)誤時(shí)隱藏，用處不大errorContainer: "#m

44、essageBox1, #messageBox2"errorLabelContainer：Selector把錯(cuò)誤信息統(tǒng)一放在一個(gè)容器里面。wrapper：String 用什么標(biāo)簽再把上邊的errorELement包起來(lái) 一般這三個(gè)屬性同時(shí)使用，實(shí)現(xiàn)在一個(gè)容器內(nèi)顯示所有錯(cuò)誤提示的功能，并且沒(méi)有信息時(shí)自動(dòng)隱藏 errorContainer: "div.error", errorLabelContainer: $("#signupForm div.error"), wrapper: "li"5、更改錯(cuò)誤信息顯示的樣式設(shè)置錯(cuò)誤提示的

45、樣式，可以增加圖標(biāo)顯示，在該系統(tǒng)中已經(jīng)建立了一個(gè)validation.css專門用于維護(hù)校驗(yàn)文件的樣式input.error border: 1px solid red; label.error background:url("./demo/images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px;padding-bottom: 2px; font-weight: bold;color: #EA5200; label.checked background:url("./demo/images/chec

46、ked.gif") no-repeat 0px 0px;6、每個(gè)字段驗(yàn)證通過(guò)執(zhí)行函數(shù)success：String,Callback要驗(yàn)證的元素通過(guò)驗(yàn)證后的動(dòng)作，如果跟一個(gè)字符串，會(huì)當(dāng)做一個(gè)css類，也可跟一個(gè)函數(shù) success: function(label) / set &nbsp; as text for IElabel.html("&nbsp;").addClass("checked");/label.addClass("valid").text("Ok!") 添加"va

47、lid"到驗(yàn)證元素, 在CSS中定義的樣式<style>label.valid </style>success: "valid"7、驗(yàn)證的觸發(fā)方式修改下面的雖然是boolean型的，但建議除非要改為false,否則別亂添加。a.onsubmit：Boolean Default: true提交時(shí)驗(yàn)證. 設(shè)置唯false就用其他方法去驗(yàn)證b.onfocusout：Boolean Default: true失去焦點(diǎn)是驗(yàn)證(不包括checkboxes/radio buttons)c.onkeyup：Boolean Default: true在key

48、up時(shí)驗(yàn)證.d.onclick：Boolean Default: true在checkboxes 和 radio 點(diǎn)擊時(shí)驗(yàn)證e.focusInvalid：Boolean Default: true提交表單后，未通過(guò)驗(yàn)證的表單(第一個(gè)或提交之前獲得焦點(diǎn)的未通過(guò)驗(yàn)證的表單)會(huì)獲得焦點(diǎn)f.focusCleanup：Boolean Default: false如果是true那么當(dāng)未通過(guò)驗(yàn)證的元素獲得焦點(diǎn)時(shí)，移除錯(cuò)誤提示。避免和focusInvalid一起用8、異步驗(yàn)證remote：URL使用ajax方式進(jìn)行驗(yàn)證，默認(rèn)會(huì)提交當(dāng)前驗(yàn)證的值到遠(yuǎn)程地址，如果需要提交其他的值，可以使用data選項(xiàng) 示例一：re

49、mote: "check-email.php"示例二：remote: url: "check-email.php", /后臺(tái)處理程序type: "post", /數(shù)據(jù)發(fā)送方式dataType: "json", /接受數(shù)據(jù)格式 data: /要傳遞的數(shù)據(jù)username: function() return $("#username").val(); 遠(yuǎn)程地址只能輸出"true"或"false"，不能有其它輸出。 9、添加自定義校驗(yàn)addMethod：nam

50、e, method, message自定義驗(yàn)證方法/ 中文字兩個(gè)字節(jié)jQuery.validator.addMethod( "byteRangeLength",function(value, element, param) var length = value.length;for(var i = 0; i < value.length; i+)if(value.charCodeAt(i) > 127)length+; return this.optional(element) | (length >= param0 && length &

51、lt;= param1); ,$.validator.format("請(qǐng)確保輸入的值在0-1個(gè)字節(jié)之間(一個(gè)中文字算2個(gè)字節(jié))") );/ 郵政編碼驗(yàn)證jQuery.validator.addMethod("isZipCode", function(value, element) var tel = /0-96$/;return this.optional(element) | (tel.test(value);, "請(qǐng)正確填寫(xiě)您的郵政編碼"); 1.要在additional-methods.js文件中添加或者在jquery.validate.js添加建議一般寫(xiě)在additional-methods.js文件中2.在messages_cn.js文件添加：isZipCode: "只能包括中文字、英文字母、數(shù)字和下劃線", 調(diào)用前要添加對(duì)additional-methods.js文件的引用。10、radio和checkbox、select的驗(yàn)證1.radio的required表示必須選中一個(gè)<input type="radio"

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論