首页>>表单>>一个简洁的表单验证 预置格式(2014-07-09)

一个简洁的表单验证 预置格式

一个简洁的表单验证 预置格式
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form>  
  2. <input value="" data-validate="required,number">  
  3. <input value="" data-validate="required,email">  
  4. <input class="submit" type="submit">  
  5. </form>  

 

JavaScript Code
  1. $.verify.addFieldRules({  
  2.     /* Regex validators 
  3.      * - at plugin load, 'regex' will be transformed into validator function 'fn' which uses 'message' 
  4.      */  
  5.     currency: {  
  6.       regex: /^$?d+(,d+)*(.d+)?$/,  
  7.       message: "Invalid monetary value"  
  8.     },  
  9.     email: {  
  10.       regex: /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/, 
  11.       message: "Invalid email address" 
  12.     }, 
  13.     alphanumeric: { 
  14.       regex: /^[0-9A-Za-z]+$/, 
  15.       message: "Use digits and letters only" 
  16.     }, 
  17.     street_number: { 
  18.       regex: /^d+[A-Za-z]?(-d+)?[A-Za-z]?$/, 
  19.       message: "Street Number only" 
  20.     }, 
  21.     number: { 
  22.       regex: /^d+$/, 
  23.       message: "Use digits only" 
  24.     }, 
  25.     numberSpace: { 
  26.       regex: /^[d ]+$/, 
  27.       message: "Use digits and spaces only" 
  28.     }, 
  29.     postcode: { 
  30.       regex: /^d{4}$/, 
  31.       message: "Invalid postcode" 
  32.     }, 
  33.     date: { 
  34.       fn: function(r) { 
  35.         if($.verify.utils.parseDate(r.val())) 
  36.           return true; 
  37.         return r.message; 
  38.       }, 
  39.       message: "Invalid date" 
  40.     }, 
  41.     required: { 
  42.  
  43.       fn: function(r) { 
  44.         return r.requiredField(r, r.field); 
  45.       }, 
  46.  
  47.       requiredField: function(r, field) { 
  48.         var v = field.val(); 
  49.    
  50.         switch (field.prop("type")) { 
  51.           case "radio": 
  52.           case "checkbox": 
  53.             var name = field.attr("name"); 
  54.             if (r.form.find("input[name='" + name + "']:checked").size() === 0) { 
  55.               if (r.form.find("input[name='" + name + "']").size() === 1) 
  56.                 return r.messages.checkboxSingle; 
  57.               else 
  58.                 return r.messages.checkboxMultiple; 
  59.             } 
  60.             break; 
  61.  
  62.           default: 
  63.             if (! $.trim(v)) 
  64.               return r.messages.all; 
  65.             break; 
  66.         } 
  67.         return true; 
  68.       }, 
  69.       messages: { 
  70.         "all": "This field is required", 
  71.         "checkboxMultiple": "Please select an option", 
  72.         "checkboxSingle": "This checkbox is required" 
  73.       } 
  74.     }, 
  75.     regex: { 
  76.       fn: function(r) { 
  77.         var re; 
  78.         try { 
  79.           var str = r.args[0]; 
  80.           re = new RegExp(str); 
  81.         } catch(error) { 
  82.           r.warn("Invalid regex: " + str); 
  83.           return true; 
  84.         } 
  85.  
  86.         if(!r.val().match(re)) 
  87.           return r.message || "Invalid Format"; 
  88.         return true; 
  89.       }, 
  90.       message: "Invalid format" 
  91.     }, 
  92.     asyncTest: function(r) { 
  93.  
  94.       r.prompt("Please wait..."); 
  95.       setTimeout(function() { 
  96.         r.callback(); 
  97.       },2000); 
  98.  
  99.     }, 
  100.     phone: function(r) { 
  101.       r.val(r.val().replace(/D/g,'')); 
  102.       var v = r.val(); 
  103.       if(!v.match(/^[ds]+$/)) 
  104.         return "Use digits and spaces only"; 
  105.       if(!v.match(/^0/)) 
  106.         return "Number must start with 0"; 
  107.       if(v.replace(/s/g,"").length !== 10) 
  108.         return "Must be 10 digits long"; 
  109.       return true; 
  110.     }, 
  111.     size: function(r){ 
  112.       var v = r.val(), exactOrLower = r.args[0], upper = r.args[1]; 
  113.       if(exactOrLower !== undefined && upper === undefined) { 
  114.         var exact = parseInt(exactOrLower, 10); 
  115.         if(r.val().length !== exact) 
  116.           return  "Must be "+exact+" characters"; 
  117.       } else if(exactOrLower !== undefined && upper !== undefined) { 
  118.         var lower = parseInt(exactOrLower, 10); 
  119.         upper = parseInt(upper, 10); 
  120.         if(v.length < lower || upper < v.length) 
  121.           return "Must be between "+lower+" and "+upper+" characters"; 
  122.       } else { 
  123.         console.log("size validator parameter error on field: " + r.field.attr('name')); 
  124.       } 
  125.        
  126.       return true; 
  127.     }, 
  128.     min: function(r) { 
  129.       var v = r.val(), min = parseInt(r.args[0], 10); 
  130.       if(v.length < min) 
  131.         return "Must be at least " + min + " characters"; 
  132.       return true; 
  133.     }, 
  134.     max: function(r) { 
  135.       var v = r.val(), max = parseInt(r.args[0], 10); 
  136.       if(v.length > max) 
  137.         return "Must be at most " + max + " characters"; 
  138.       return true; 
  139.     }, 
  140.  
  141.     decimal: function(r) { 
  142.       var vStr = r.val(), 
  143.           places = r.args[0] ? parseInt(r.args[0], 10) : 2; 
  144.      
  145.       if(!vStr.match(/^d+(,d{3})*(.d+)?$/)) 
  146.         return "Invalid decimal value"; 
  147.    
  148.       var v = parseFloat(vStr.replace(/[^d.]/g,'')), 
  149.           factor = Math.pow(10,places); 
  150.  
  151.       v = (Math.round(v*factor)/factor); 
  152.       r.field.val(v); 
  153.  
  154.       return true; 
  155.     }, 
  156.     min_val: function(r) { 
  157.       var v = parseFloat(r.val().replace(/[^d.]/g,'')), 
  158.           suffix = r.args[1] || '', 
  159.           min = parseFloat(r.args[0]); 
  160.       if(v < min) 
  161.         return "Must be greater than " + min + suffix; 
  162.       return true; 
  163.     }, 
  164.     max_val: function(r) { 
  165.       var v = parseFloat(r.val().replace(/[^d.]/g,'')), 
  166.           suffix = r.args[1] || '', 
  167.           max = parseFloat(r.args[0]); 
  168.       if(v > max) 
  169.         return "Must be less than " + max + suffix; 
  170.       return true; 
  171.     }, 
  172.     range_val: function(r) { 
  173.       var v = parseFloat(r.val().replace(/[^d.]/g,'')), 
  174.           prefix = r.args[2] || '', 
  175.           suffix = r.args[3] || '', 
  176.           min = parseFloat(r.args[0]), 
  177.           max = parseFloat(r.args[1]); 
  178.       if(v > max || v < min) 
  179.         return "Must be between " + prefix + min + suffix + "nand " + prefix + max + suffix; 
  180.       return true; 
  181.     }, 
  182.  
  183.     agreement: function(r){ 
  184.       if(!r.field.is(":checked")) 
  185.         return "You must agree to continue"; 
  186.       return true; 
  187.     }, 
  188.     minAge: function(r){ 
  189.       var age = r.args[0]; 
  190.       if(!age || isNaN(parseInt(age,10))) { 
  191.         console.log("WARNING: Invalid Age Param: " + age); 
  192.         return true; 
  193.       } 
  194.       var currDate = new Date(); 
  195.       var minDate = new Date();  
  196.       minDate.setFullYear(minDate.getFullYear() - parseInt(age,10)); 
  197.       var fieldDate = $.verify.utils.parseDate(r.val()); 
  198.  
  199.       if(fieldDate === "Invalid Date") 
  200.         return "Invalid Date"; 
  201.       if(fieldDate > minDate) 
  202.         return "You must be at least " + age; 
  203.       return true; 
  204.     } 
  205.   }); 
  206.  
  207.   /* Group validation rules 
  208.    */ 
  209.   $.verify.addGroupRules({ 
  210.  
  211.     dateRange: function(r) { 
  212.       var start = r.field("start"), 
  213.           end = r.field("end"); 
  214.  
  215.       if(start.length === 0 || end.length === 0) { 
  216.         r.warn("Missing dateRange fields, skipping..."); 
  217.         return true; 
  218.       } 
  219.  
  220.       var startDate = $.verify.utils.parseDate(start.val()); 
  221.       if(!startDate) 
  222.         return "Invalid Start Date"; 
  223.  
  224.       var endDate = $.verify.utils.parseDate(end.val()); 
  225.       if(!endDate) 
  226.         return "Invalid End Date"; 
  227.  
  228.       if(startDate >= endDate) 
  229.         return "Start Date must come before End Date";  
  230.   
  231.       return true;  
  232.     }  
  233.   
  234.   });  

 


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