首页>>表单>>jQuery 表单验证，包括简单和高级，高级支持验证radio，email select等(2014-01-04)

jQuery 表单验证，包括简单和高级，高级支持验证radio，email select等

jQuery 表单验证，包括简单和高级，高级支持验证radio，email select等
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="row-fluid">  
  2.     <div class="span12">  
  3.         <form id="form-1" method="post" action="" class="form-horizontal">  
  4.             <fieldset>  
  5.                 <legend>Basic Form <a href="#example-1" class="btn btn-mini"><i class="icon-eye-close"></i> Code</a></legend>  
  6.   
  7.                 <div class="control-group">  
  8.                     <label for="required" class="control-label">Anything</label>  
  9.                     <div class="controls">  
  10.                         <input type="text" id="required" name="required" data-trim data-min-length="2" title="Anything" class="required" maxlength="128">  
  11.                     </div>  
  12.                 </div>  
  13.   
  14.                 <div class="control-group">  
  15.                     <label for="optional" class="control-label">Optional</label>  
  16.                     <div class="controls">  
  17.                         <input type="text" id="optional" name="optional" title="Optional" maxlength="128">  
  18.                     </div>  
  19.                 </div>  
  20.   
  21.                 <div class="control-group">  
  22.                     <div class="controls">  
  23.                         <input type="submit" class="btn btn-small btn-primary" id="submit-1" value="Submit">  
  24.                     </div>  
  25.                 </div>  
  26. <pre id="example-1">// Validate on form submission  
  27. $('#form-1').submit(function(e) {  
  28.   e.preventDefault();  
  29.     $(this).formvalidate({  
  30.       failureMessages: true,  
  31.       successMessages: true,  
  32.       messageFailureClass: 'label label-important',  
  33.       messageSuccessClass: 'label label-success',  
  34.       onSuccess: function(form) {  
  35.         alert('Form #1 is valid!');  
  36.       }  
  37.     });  
  38. });</pre>  
  39.             </fieldset>  
  40.         </form>  
  41.   
  42.         <form id="form-2" method="post" action="" class="form-horizontal">  
  43.             <fieldset>  
  44.                 <legend>Advanced Form <a href="#example-2" class="btn btn-mini"><i class="icon-eye-close"></i> Code</a></legend>  
  45.                 <div class="control-group">  
  46.                     <label class="control-label" for="name">Name</label>  
  47.                     <div class="controls">  
  48.                         <input type="text" id="name" name="name" title="Name" data-trim data-min-chars="3" data-is-not="vic bob tom sam" class="required" maxlength="128">  
  49.                     </div>  
  50.                 </div>  
  51.                 <div class="control-group">  
  52.                     <label class="control-label"  for="age">Age</label>  
  53.                     <div class="controls">  
  54.                         <input type="text" id="age" name="age" title="Age" data-int data-between-numeric="1 101" maxlength="128">  
  55.                     </div>  
  56.                 </div>  
  57.                 <div class="control-group">  
  58.                     <label class="control-label"  for="birth_date">Birth Date</label>  
  59.                     <div class="controls">  
  60.                         <input type="text" id="birth_date" name="birth_date" title="Birth Date" data-date="YYYY-MM-DD" maxlength="128" placeholder="YYYY-MM-DD">  
  61.                     </div>  
  62.                 </div>  
  63.                 <div class="control-group">  
  64.                     <label class="control-label"  for="email">Email</label>  
  65.                     <div class="controls">  
  66.                         <input type="text" id="email" name="email" title="Email" data-min-chars="5" data-email class="required" maxlength="128">  
  67.                     </div>  
  68.                 </div>  
  69.                 <div class="control-group">  
  70.                     <label class="control-label"  for="continent">Continent</label>  
  71.                     <div class="controls">  
  72.                         <select id="continent" name="continent" title="Continent" class="required">  
  73.                             <option value="">— Please Select —</option>  
  74.                             <option value="na">North America</option>  
  75.                             <option value="sa">South America</option>  
  76.                             <option value="an">Antarctica</option>  
  77.                             <option value="af">Africa</option>  
  78.                             <option value="eu">Europe</option>  
  79.                             <option value="as">Asia</option>  
  80.                             <option value="au">Australia</option>  
  81.                         </select>  
  82.                     </div>  
  83.                 </div>  
  84.                 <div class="control-group">  
  85.                     <label class="control-label">Are You Cool?</label>  
  86.                     <div class="controls">  
  87.                         <label class="radio inline"><input type="radio" name="cool" value="Y" id="cool-yes" class="required" title="Are you cool?"> Yes</label>  
  88.                         <label class="radio inline"><input type="radio" name="cool" value="N" id="cool-no"> No</label>  
  89.                     </div>  
  90.                 </div>  
  91.                 <div class="control-group">  
  92.                     <label class="control-label" for="why_cool">Why So Cool?</label>  
  93.                     <div class="controls">  
  94.                         <textarea id="why_cool" name="why_cool" data-trim data-min-length="4" data-max-length="512" data-required-if="cool-yes" title="Why So Cool?" cols="64" rows="8"></textarea>  
  95.                     </div>  
  96.                 </div>  
  97.                 <div class="control-group">  
  98.                     <label class="control-label">What 2 colors do you like?</label>  
  99.                     <div class="controls">  
  100.                         <select multiple="multiple" id="colors" name="colors[]" title="Colors" data-num-options="2" class="required">  
  101.                             <option value="red">Red</option>  
  102.                             <option value="orange">Orange</option>  
  103.                             <option value="yellow">Yellow</option>  
  104.                             <option value="green">Green</option>  
  105.                             <option value="blue">Blue</option>  
  106.                             <option value="purple">Purple</option>  
  107.                         </select>  
  108.                     </div>  
  109.                 </div>  
  110.                 <div class="control-group">  
  111.                     <label class="control-label">What Do You Like?</label>  
  112.                     <div class="controls">  
  113.                         <label class="checkbox inline"><input type="checkbox" name="like[]" value="ci" title="What do you like?" class="required"> CodeIgniter</label>  
  114.                         <label class="checkbox inline"><input type="checkbox" name="like[]" value="fuel" data-min-options="2" data-max-options="4"> Fuel</label>  
  115.                         <label class="checkbox inline"><input type="checkbox" name="like[]" value="kohana"> Kohana</label>  
  116.                         <label class="checkbox inline"><input type="checkbox" name="like[]" value="laravel"> Laravel</label>  
  117.                         <label class="checkbox inline"><input type="checkbox" name="like[]" value="zend"> Zend</label>  
  118.                     </div>  
  119.                 </div>  
  120.                 <div class="control-group">  
  121.                     <div class="controls">  
  122.                         <input type="submit" class="btn btn-small btn-primary" id="submit-2" value="Submit">  
  123.                     </div>  
  124.                 </div>  
  125.   
  126. <pre id="example-2">$('#submit-2').click(function(e) {  
  127.   e.preventDefault();  
  128.   
  129.   // From the anchor element find the closest form element  
  130.   $(this).closest('form').formvalidate({  
  131.     failureMessages: true,  
  132.     successMessages: true,  
  133.     messageFailureClass: 'label label-important',  
  134.     messageSuccessClass: 'label label-success',  
  135.     onSuccess: function(form) {  
  136.       alert('Form #2 is valid!');  
  137.     },  
  138.     localization: {  
  139.       en: {  
  140.         success: {  
  141.           name: 'Good, you know your name.',  
  142.           age: 'Ahh, {1}, a wise age.',  
  143.           birth_date: 'The year of the tiger!',  
  144.           email: 'We promise not to stalk you.',  
  145.           continent: function(title, value, name, input) {  
  146.             var text = $(':input[name="' + name + '"] option[value="' + value + '"]').text();  
  147.             return text + ', really? Me too!';  
  148.           },  
  149.           'colors[]': 'O, wow good choices!',  
  150.           why_cool: 'Ya, u got it!',  
  151.             'like[]': 'Those are my favorite frameworks too.!'  
  152.           },  
  153.           failure: {  
  154.             email: function(title, value, name, input) {  
  155.             return 'There is no way that email ' + value + ' is valid.';  
  156.           }  
  157.         }  
  158.       }  
  159.     }  
  160.   });  
  161. });</pre>  
  162.             </fieldset>  
  163.         </form>  
  164.   
  165.   
  166.     </div>  
  167. </div>  
  168.   
  169. <script type="text/javascript">  
  170.     jQuery(document).ready(function($) {  
  171.   
  172.         // Validate on form submission  
  173.         $('#form-1').submit(function(e) {  
  174.             e.preventDefault();  
  175.             $(this).formvalidate({  
  176.                 failureMessages: true,  
  177.                 successMessages: true,  
  178.                 messageFailureClass: 'label label-important',  
  179.                 messageSuccessClass: 'label label-success',  
  180.                 onSuccess: function(O) {  
  181.                     alert('Form #1 is valid!');  
  182.                 }  
  183.             });  
  184.         });  
  185.   
  186.         // Validate when the submit button is clicked  
  187.         $('#submit-2').click(function(e) {  
  188.             e.preventDefault();  
  189.   
  190.             // From the anchor element find the closest form element  
  191.             $(this).closest('form').formvalidate({  
  192.                 failureMessages: true,  
  193.                 successMessages: true,  
  194.                 messageFailureClass: 'label label-important',  
  195.                 messageSuccessClass: 'label label-success',  
  196.                 onSuccess: function(form) {  
  197.                     alert('Form #2 is valid!');  
  198.                 },  
  199.                 validations: {  
  200.                     isNot: function(input, params) {  
  201.                         return $.inArray(input.toLowerCase(), params);  
  202.                     }  
  203.                 },  
  204.                 localization: {  
  205.                     en: {  
  206.                         success: {  
  207.                             name: 'Good, you know your name.',  
  208.                             age: 'Ahh, {1}, a wise age.',  
  209.                             birth_date: function() {  
  210.                                 var animals = ['rat', 'ox', 'tiger', 'rabbit', 'dragon', 'snake', 'horse', 'sheep', 'monkey', 'rooster', 'dog', 'pig']  
  211.                                 var animal = animals[Math.floor(Math.random()*animals.length)];  
  212.                                 return 'The year of the ' + animal + '!';  
  213.                             },  
  214.                             email: 'We promise not to stalk you.',  
  215.                             continent: function(title, value, name, input) {  
  216.                                 var text = $(':input[name="' + name + '"] option[value="' + value + '"]').text();  
  217.                                 return text + ', really? Me too!';  
  218.                             },  
  219.                             'colors[]': 'O, wow good choices!',  
  220.                             why_cool: 'Ya, u got it!',  
  221.                             'like[]': 'Those are my favorite frameworks too.!'  
  222.                         },  
  223.                         failure: {  
  224.                             email: function(title, value, name, input) {  
  225.                                 return 'There is no way that email ' + value + ' is valid.';  
  226.                             },  
  227.                             isNot: function(title, value, name, input) {  
  228.                                 return 'That name is not original enough.';  
  229.                             }  
  230.                         }  
  231.                     }  
  232.                 }  
  233.             });  
  234.         });  
  235.   
  236.         // Toggle "Why So Cool?"  
  237.         (function () {  
  238.             var cool = $('input[name="cool"]');  
  239.             var why = $('#why_cool').closest('.control-group');  
  240.   
  241.             // Toggle "Why So Cool?" question  
  242.             var toggle = function toggle() {;  
  243.                 $(cool).filter(':checked').val() === 'Y' ? $(why).show() : $(why).hide();  
  244.                 return toggle;  
  245.             }();  
  246.   
  247.             // Run toggle function on change  
  248.             $(document).on('change', $(cool), function() {  
  249.                 toggle();  
  250.             });  
  251.         })();  
  252.   
  253.         // Toggle code  
  254.         $('legend a').click(function(e) {  
  255.             e.preventDefault();  
  256.             $( $(this).attr('href') ).toggle();  
  257.         });  
  258.   
  259.         // Toggle language  
  260.         $('#languages a').click(function(e) {  
  261.             e.preventDefault();  
  262.             $.extend(true, jQuery.fn.formvalidate.options.language = $(this).data('language'));  
  263.             $(this).siblings().removeClass('current').end().addClass('current');  
  264.         });  
  265.     });  
  266. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_211.html