1、官方表單驗證資料
插件下載: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
插件文檔:http://docs.jquery.com/Plugins/Validation
配置說明:http://docs.jquery.com/Plugins/Validation/validate#options
2、表單驗證實例
實例一：精簡驗證，通過表單對象調用validate()方法進行驗證，驗證規則通過html標簽屬性定義：以下為常用屬性定義距離
- class='required' //必須字段
- class='mail' //郵箱驗證
- class='url' //URL網址驗證
- class='date' //正確的日期 格式滿足 2012，0204，2012-02-04
- class='number' //輸入合法的數字
- class='digits' //輸入整數
- minlength='' //最小輸入長度
- maxlength='' //最長輸入長度(該值不會提示，當值達到一定字符數不可再增長)
- max='' //輸入的數值小於指定值
- min='' //輸入的數值大於指定值
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>jQuery PlugIn - 表單驗證插件實例 Validate </title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <script type="text/javascript" src="jquery.js"></script> 7 <script type="text/javascript" src="jquery.validate.min.js"></script> 8 <script type="text/javascript" src="messages_cn.js"></script> 9 <style type="text/css"> 10 * { font-family: Verdana; font-size:13px; } 11 input[type='text']{width:200px;} 12 textarea{width:155px;} 13 label { width: 10em; float: left; } 14 label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } 15 </style> 16 <script> 17 $(document).ready(function(){ 18 $("#commentForm").validate(); 19 }); 20 </script> 21 </head> 22 <body> 23 <form id="commentForm" method="get" action="" > 24 <fieldset> 25 <legend>表單驗證</legend> 26 <p><label>Name</label><input name="name" class="required" maxlength="4" minlength="2" /></p> 27 <p><label >E-Mail</label><input name="email" class="required email" /></p> 28 <p><label >URL</label><input name="url" class="url"/></p> 29 <p><label>text</label><textarea name="text" cols="22" class="required"></textarea></p> 30 <p><input class="submit" type="submit" value="提交"/></p> 31 </fieldset> 32 </form> 33 </body> 34 </html>
實例二：方法驗證，通過自定義表單規則來驗證表單
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>jQuery PlugIn - 表單驗證插件實例 Validate </title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <script type="text/javascript" src="jquery.js"></script> 7 <script type="text/javascript" src="jquery.validate.min.js"></script> 8 <script type="text/javascript" src="messages_cn.js"></script> 9 <style type="text/css"> 10 * { font-family: Verdana; font-size:13px; } 11 input[type='text']{width:200px;} 12 textarea{width:155px;} 13 .title{float:left;width:10em} 14 em.error { float: none; color: red; padding-left: .5em; vertical-align: top; } 15 .field_notice{display:none;} 16 .checking{display:none;} 17 </style> 18 <script> 19 $(document).ready(function(){ 20 $("#commentForm").validate({ 21 errorPlacement: function(error, element){ 22 var error_td = element.next('em'); 23 error_td.find('.field_notice').hide(); 24 error_td.append(error); 25 }, 26 success: function(label){ 27 label.addClass('validate_right').text('OK!'); 28 }, 29 onkeyup: false, 30 rules: { 31 name: { 32 required:true, 33 minlength:3, 34 maxlength:40, 35 remote:{ 36 url :'index.php?ajax=1', 37 type:'get', 38 data:{ 39 name : function(){ 40 return $('#name').val(); 41 } 42 }, 43 beforeSend:function(){ 44 var _checking = $('#checking'); 45 _checking.prev('.field_notice').hide(); 46 _checking.next('label').hide(); 47 $(_checking).show(); 48 }, 49 complete :function(){ 50 $('#checking').hide(); 51 } 52 } 53 }, 54 email: {required: true, email: true }, 55 url:{required:true,url:true}, 56 text:"required" 57 }, 58 messages: { 59 name: {required:"需要輸入名稱", minlength:"名稱長度在3-40個字符之間", maxlength:"名稱長度在3-40個字符之間",remote:"用戶名已存在"}, 60 email: {required:"需要輸入電子郵箱", email:"電子郵箱格式不正確"}, 61 url: {required:"需要輸入URL地址", url:"URL地址格式不正確"}, 62 text:"需要輸入文本內容" 63 }, 64 }); 65 }); 66 </script> 67 </head> 68 <body> 69 <form id="commentForm" method="get" action="" > 70 <fieldset> 71 <legend>表單驗證</legend> 72 <p><label class="title" >Name</label><input id="name" name="name"/> 73 <em><label class="field_notice"></label><label id="checking" class="checking">檢查中...</label></em> 74 </p> 75 <p><label class="title" >E-Mail</label><input name="email"/> 76 <em><label class="field_notice"></label></em> 77 </p> 78 <p><label class="title" >URL</label><input name="url"/> 79 <em><label class="field_notice"></label></em> 80 </p> 81 <p><label class="title" >text</label><textarea name="text" cols="22"></textarea> 82 <em><label class="field_notice"></label></em> 83 </p> 84 <p><input class="submit" type="submit" value="提交"/></p> 85 </fieldset> 86 </form> 87 </body> 88 </html>