jQuery validation
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery validation相关的知识，希望对你有一定的参考价值。
鏍囩锛?/p>
jQuery validation
寮曠敤:http://www.runoob.com/jquery/jquery-plugin-validate.html
validation demo 涓嬭浇鍦板潃:https://github.com/jzaefferer/jquery-validation/releases
瀵煎叆 js 搴擄紙浣跨敤鑿滈笩鏁欑▼鎻愪緵鐨凜DN锛?/span>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
榛樿鏍￠獙瑙勫垯
(1)required:true 蹇呰緭瀛楁
(2)remote:"check.php" 銆€銆€ 浣跨敤ajax鏂规硶璋冪敤check.php楠岃瘉杈撳叆鍊?
(3)email:true 蹇呴』杈撳叆姝ｇ‘鏍煎紡鐨勭數瀛愰偖浠?
(4)url:true 蹇呴』杈撳叆姝ｇ‘鏍煎紡鐨勭綉鍧€
(5)date:true 蹇呴』杈撳叆姝ｇ‘鏍煎紡鐨勬棩鏈?鏃ユ湡鏍￠獙ie6鍑洪敊锛屾厧鐢?
(6)dateISO:true 蹇呴』杈撳叆姝ｇ‘鏍煎紡鐨勬棩鏈?ISO)锛屼緥濡傦細2009-06-23锛?998/01/22 鍙獙璇佹牸寮忥紝涓嶉獙璇佹湁鏁堟€?
(7)number:true 蹇呴』杈撳叆鍚堟硶鐨勬暟瀛?璐熸暟锛屽皬鏁?
(8)digits:true 蹇呴』杈撳叆鏁存暟
(9)creditcard: 蹇呴』杈撳叆鍚堟硶鐨勪俊鐢ㄥ崱鍙?
(10)equalTo:"#field" 杈撳叆鍊煎繀椤诲拰#field鐩稿悓
(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 杈撳叆鍊间笉鑳藉ぇ浜?
(17)min:10 杈撳叆鍊间笉鑳藉皬浜?0
1 defaults: { 2 messages: {},//鑷畾涔夌殑鎻愮ず淇℃伅key:value鐨勫舰寮弅ey鏄楠岃瘉鐨勫厓绱?鍊兼槸瀛楃涓叉垨鍑芥暟 3 groups: {},//瀵逛竴缁勫厓绱犵殑楠岃瘉,鐢ㄤ竴涓敊璇彁绀?鐢╡rror Placement鎺у埗鎶婂嚭閿欎俊鎭斁鍦ㄥ摢閲?/span> 4 rules: {},//鑷畾涔夎鍒?key:value鐨勫舰寮?key鏄楠岃瘉鐨勫厓绱?value鍙互鏄瓧绗︿覆鎴栧璞?/span> 5 errorClass: "error",//鎸囧畾閿欒鎻愮ず鐨刢ss绫诲悕锛屽彲浠ヨ嚜瀹氫箟閿欒鎻愮ず鐨勬牱寮?/span> 6 pendingClass: "pending", 7 validClass: "valid", 8 errorElement: "label",//鐢ㄤ粈涔堟爣绛炬爣璁伴敊璇紝榛樿鐨勬槸label 9 focusCleanup: false,//濡傛灉鏄痶rue閭ｄ箞褰撴湭閫氳繃楠岃瘉鐨勫厓绱犺幏寰楃劍鐐规椂锛岀Щ闄ら敊璇彁绀恒€傞伩鍏嶅拰 focusInvalid 涓€璧风敤 10 focusInvalid: true,//鎻愪氦琛ㄥ崟鍚庯紝鏈€氳繃楠岃瘉鐨勮〃鍗?绗竴涓垨鎻愪氦涔嬪墠鑾峰緱鐒︾偣鐨勬湭閫氳繃楠岃瘉鐨勮〃鍗?浼氳幏寰楃劍鐐?/span> 11 errorContainer: $( [] ),//鏄剧ず鎴栬€呴殣钘忛獙璇佷俊鎭紝鍙互鑷姩瀹炵幇鏈夐敊璇俊鎭嚭鐜版椂鎶婂鍣ㄥ睘鎬у彉涓烘樉绀猴紝鏃犻敊璇椂闅愯棌锛岀敤澶勪笉澶?errorContainer: "#messageBox1, #messageBox2" 12 errorLabelContainer: $( [] ),//鎶婇敊璇俊鎭粺涓€鏀惧湪涓€涓鍣ㄩ噷闈€?/span> 13 onsubmit: true,//鎻愪氦鏃堕獙璇? 璁剧疆鍞痜alse灏辩敤鍏朵粬鏂规硶鍘婚獙璇?/span> 14 ignore: ":hidden",//蹇界暐鏌愪簺鍏冪礌涓嶉獙璇?/span> 15 ignoreTitle: false,
1 <script src="../dist/localization/messages_zh.js" type="text/javascript"></script> 2 <script> 3 4 //鑷畾涔夐獙璇佹柟娉?/span> 5 // 涓枃瀛椾袱涓瓧鑺?/span> 6 jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { 7 var length = value.length; 8 for(var i = 0; i < value.length; i++){ 9 if(value.charCodeAt(i) > 127){ 10 length++; 11 } 12 } 13 return this.optional(element) || ( length >= param[0] && length <= param[1] ); 14 }, $.validator.format("璇风‘淇濊緭鍏ョ殑鍊煎湪{0}-{1}涓瓧鑺備箣闂?涓€涓腑鏂囧瓧绠?涓瓧鑺?")); 15 16 // 閭斂缂栫爜楠岃瘉 17 jQuery.validator.addMethod("isZipCode", function(value, element) { 18 var tel = /^[0-9]{6}$/; 19 return this.optional(element) || (tel.test(value)); 20 }, "璇锋纭～鍐欐偍鐨勯偖鏀跨紪鐮?/span>"); 21 22 $.validator.setDefaults({//榛樿 23 24 }); 25 26 $().ready(function() { 27 $("#commentForm").validate({ 28 debug:true,//濡傛灉杩欎釜鍙傛暟涓簍rue锛岄偅涔堣〃鍗曚笉浼氭彁浜わ紝鍙繘琛屾鏌ワ紝璋冭瘯鏃跺崄鍒嗘柟渚?/span> 29 errorContainer: $(鈥?/span>div.container鈥?/span>), 30 errorLabelContainer: $("ol", container), 31 wrapper: 鈥?/span>li鈥?/span>,//鐢ㄤ粈涔堟爣绛惧啀鎶婁笂杈圭殑errorELement鍖呰捣鏉?/span> 32 errorPlacement: function(error, element) {//璺熶竴涓嚱鏁?鍙互鑷畾涔夐敊璇斁鍒板摢閲?/span> 33 error.appendTo(element.parent());//1.榛樿鎶婇敊璇俊鎭斁鍦ㄩ獙璇佺殑鍏冪礌鍚庨潰 34 //2. Append error within linked label 35 $( element ).closest( "form" ).find( "label[for=鈥?/span>" + element.attr( "id" ) + "鈥榏" ).append( error ); 36 //3. 37 if ( element.is(":radio") ) 38 error.appendTo( element.parent().next().next() ); 39 else if ( element.is(":checkbox") ) 40 error.appendTo ( element.next() ); 41 else 42 error.appendTo( element.parent().next() ); 43 }, 44 success: function(label) {//瑕侀獙璇佺殑鍏冪礌閫氳繃楠岃瘉鍚庣殑鍔ㄤ綔锛屽鏋滆窡涓€涓瓧绗︿覆锛屼細褰撳仛涓€涓猚ss绫伙紝涔熷彲璺熶竴涓嚱鏁?/span> 45 // set as text for IE 46 label.html(" ").addClass("checked"); 47 //label.addClass("valid").text("Ok!") 48 }, 49 submitHandler: function() {//閫氳繃楠岃瘉鍚庤繍琛岀殑鍑芥暟,閲岄潰瑕佸姞涓婅〃鍗曟彁浜ょ殑鍑芥暟,鍚﹀垯琛ㄥ崟涓嶄細鎻愪氦 50 form.submit(); 51 $(form).ajaxSubmit();//浣跨敤ajax鏂瑰紡 52 //閫氬父鎯呭喌涓嬶紝鎴戜滑鐩存帴閫氳繃form鎻愪氦鐨勮瘽锛?鎻愪氦鍚庡綋鍓嶉〉闈㈣烦杞埌form鐨刟ction鎵€鎸囧悜鐨勯〉闈€傜劧鑰岋紝寰堝鏃跺€欐垜浠瘮涓嶅笇鏈涙彁浜よ〃鍗曞悗椤甸潰璺宠浆锛岄偅涔堬紝鎴戜滑灏卞彲浠jaxSubmit(obj)鏉ユ彁浜ゆ暟鎹€?/span> 53 //ajaxSubmit(obj)鏂规硶鏄痡Query鐨勪竴涓彃浠秊query.form.js閲岄潰鐨勬柟娉曪紝鎵€浠ヤ娇鐢ㄦ鏂规硶闇€瑕佸厛寮曞叆杩欎釜鎻掍欢銆?/span> 54 //<script src="http://malsup.github.io/jquery.form.js"></script 55 /*$(this).ajaxSubmit({ 56 type: 鈥榩ost鈥? // 鎻愪氦鏂瑰紡 get/post 57 url: 鈥榶our url鈥? // 闇€瑕佹彁浜ょ殑 url 58 data: { 59 鈥榯itle鈥? title, 60 鈥榗ontent鈥? content 61 }, 62 success: function(data) { // data 淇濆瓨鎻愪氦鍚庤繑鍥炵殑鏁版嵁锛屼竴鑸负 json 鏁版嵁 63 // 姝ゅ鍙 data 浣滅浉鍏冲鐞? 64 alert(鈥樻彁浜ゆ垚鍔燂紒鈥?; 65 } 66 $(this).resetForm(); // 鎻愪氦鍚庨噸缃〃鍗? 67 });*/ 68 } 69 }); 70 71 // validate signup form on keyup and submit 72 $("#signupForm").validate({ 73 rules: {//鑷畾涔夎鍒?key:value鐨勫舰寮?key鏄楠岃瘉鐨勫厓绱?value鍙互鏄瓧绗︿覆鎴栧璞?/span> 74 firstname: "required", 75 lastname: "required", 76 username: { 77 required: true, 78 minlength: 2 79 }, 80 password: { 81 required: true, 82 minlength: 5 83 }, 84 confirm_password: { 85 required: true, 86 minlength: 5, 87 equalTo: "#password" 88 }, 89 email: { 90 required: true, 91 email: true 92 }, 93 topic: { 94 required: "#newsletter:checked", 95 minlength: 2 96 }, 97 agree: "required" 98 }, 99 messages: {//鑷畾涔夌殑鎻愮ず淇℃伅key:value鐨勫舰寮弅ey鏄楠岃瘉鐨勫厓绱?鍊兼槸瀛楃涓叉垨鍑芥暟 100 firstname: "Please enter your firstname xc", 101 lastname: "Please enter your lastname xc", 102 username: { 103 required: "Please enter a username xc", 104 minlength: "Your username must consist of at least 2 characters xc" 105 }, 106 password: { 107 required: "Please provide a password xc", 108 minlength: "Your password must be at least 5 characters long xc" 109 }, 110 confirm_password: { 111 required: "Please provide a password xc", 112 minlength: "Your password must be at least 5 characters long xc", 113 equalTo: "Please enter the same password as above xc" 114 }, 115 email: "Please enter a valid email address xc", 116 agree: "Please accept our policy xc", 117 topic: "Please select at least 2 topics xc" 118 } 119 }); 120 121 // propose username by combining first- and lastname 122 $("#username").focus(function() { 123 var firstname = $("#firstname").val(); 124 var lastname = $("#lastname").val(); 125 if (firstname && lastname && !this.value) { 126 this.value = firstname + "." + lastname; 127 } 128 }); 129 130 //code to hide topic selection, disable for demo 131 var newsletter = $("#newsletter"); 132 // newsletter topics are optional, hide at first 133 var inital = newsletter.is(":checked"); 134 var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray"); 135 var topicInputs = topics.find("input").attr("disabled", !inital); 136 // show when newsletter is checked 137 newsletter.click(function() { 138 topics[this.checked ? "removeClass" : "addClass"]("gray"); 139 topicInputs.attr("disabled", !this.checked); 140 }); 141 }); 142 </script>