jQuery的：验证两个规则使用正则表达式

Question

我尝试创建一个小的验证系统一个jQuery插件，所以我有这部分代码在我的功能

// prevent current form submitting 
    this.on('submit',function(e){ 
     // remove classes from input when we focus on it 
     $(this).on('click','input,select',function(){ 
      $(this).removeClass(settings.class); 
     }); 
     // prevent form from being submited 
     e.preventDefault(); 
     // find all inputs 
     $(this).find('input,select').each(function() { 
      if (!$(this).data('rules')) return; 
      // get rules array from the attribute 
      var rules = $(this).data("rules").split(" "); 

      // foreach rules 
      for(var i = 0; i < rules.length;i++){ 
       // check if the validation is true or attach the given class to the input 
       if(validate(rules[i],$(this))){ 
        // the validation is okey continue to the next rule 
        continue; 
       }else{ 
        // the validation is false , attach the class to the input and stop the loop 
        $(this).addClass(settings.class); 
        break; 
       } 
      } 
     }); 
    }); 
    /* validation */ 
    function validate(rule,input){ 
     switch(rule){ 
      case 'email': return patterns.email.test(input.val()); break; 
      case 'required': return patterns.required.test(input.val()); break; 
      case 'url': return patterns.url.test(input.val()); break; 
      case 'phone': return patterns.phone.test(input.val()); break; 
      case 'confirmed': 
      inputName = input.attr('name').split("_confirmation")[0]; 
      return (input.val() == $('input[name='+inputName+']').val() ? true : false); 
      break; 
      case /^min\:[0-9]+/.test(rule): 
      length = rule.split('min:')[1]; 
      return (input.val().trim() >= length ? true : false); 
      break; 
      case rule.match(/^max\:[1-9]+/)[0]: 
      length = rule.split('max:')[1]; 
      return (input.val().trim().length <= length ? true : false); 
      break; 
      case rule.match(/^exact\:[1-9]+/)[0]: 
      length = rule.split('exact:')[1]; 
      return (input.val().trim().length == length ? true : false); 
      break; 
      default: 
      return true; 

     } 
    } 
    /* Patterns */ 
    var patterns = { 
     email:/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i, 
     required:/^[\s\t\r\n]*\S+/, 
     url:/(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/, 
     phone:/^[0-9]{10,10}$/, 
    } 

当我尝试使用此验证，以确认两个输入失败最小长度：长度最大：长度 它返回rule.match（...）为空， 但当我尝试验证只有一个输入使用min：长度它工作正常。 有帮助吗？

Answer 1

这是因为你的switch。 rule是string，您的案例陈述为regex。试试这个： -

/* validation */ 
function validate(rule,input){ 
    switch(rule){ 
     case 'email': return patterns.email.test(input.val()); break; 
     case 'required': return patterns.required.test(input.val()); break; 
     case 'url': return patterns.url.test(input.val()); break; 
     case 'phone': return patterns.phone.test(input.val()); break; 
     case 'confirmed': 
     inputName = input.attr('name').split("_confirmation")[0]; 
     return (input.val() == $('input[name='+inputName+']').val() ? true : false); 
     break; 
     default: 
      if(/^min\:[0-9]+/.test(rule)){ 
       length = rule.split('min:')[1]; 
       return (input.val().trim().length >= length ? true : false); 
      } 
      if(/^max\:[1-9]+/.test(rule)){ 
       length = rule.split('max:')[1]; 
       return (input.val().trim().length <= length ? true : false); 
      } 
      if(/^exact\:[1-9]+/.test(rule)){ 
       length = rule.split('exact:')[1]; 
       return (input.val().trim().length == length ? true : false); 
      } 
      return true; 
    } 
} 

工作Fiddle

Answer 2

的问题是，rule.match(/^max\:[1-9]+/)[0]将导致错误，如果模式不匹配。在这种情况下，.match()返回null并且访问[0]失败。

max:10在您的示例中不起作用的另一个原因是[1-9]不包含0，因此10将不匹配。

两种问题的快速解决方法是将表达式更改为rule.match(/^(max\:[0-9]+)|.*/)[1]。