Jak rozszerzyć sprawdzanie adresów URL jquery.validate?

Question

Potrzebuję, aby użytkownicy mogli tworzyć częściowe adresy URL bez konieczności wpisywania pełnego adresu URL za każdym razem.

Załóżmy na przykład, że planuję adres URL: www.example.com/areas/{userinput}/home. Chcę, aby użytkownik mógł wprowadzić tekst w polu tekstowym i chcę sprawdzić, czy jest to poprawny adres URL.

adres URL Validator funkcje takie jak ten:

url: function(value, element) { 
     return this.optional(element) || /giantregex/.test(value); 
} 

Mam próbowano dodanie metody weryfikacji poprawności walidatora poprzez następujący:

$.validator.addMethod("exturl", function(value) { 
    return $.validator.methods.url.call($.validator, "http://www.example.com/areas/" + value + "/home"); 
}); 

jednak, gdy formularz jest zatwierdzony i moim rozszerzeniem jest wywoływany, ciągle pojawia się ten błąd:

Uncaught TypeError: Object function (d,a){this.settings=b.extend(true,{},b.validator.defaults,d);this.currentForm=a;this.init()} has no method 'optional' 

optional wygląda na metodę na obiekcie $.validator, ale nie mogę się dowiedzieć, jak wywołać metodę adresu URL sprawdzania poprawności.

Answer 1

jQuery Validation Plugin - v1.11.0

jQuery.validator.addMethod("complete_url", function(val, elem) { 
    // if no url, don't do anything 
    if (val.length == 0) { return true; } 

    // if user has not entered http:// https:// or ftp:// assume they mean http:// 
    if(!/^(https?|ftp):\/\//i.test(val)) { 
     val = 'http://'+val; // set both the value 
     $(elem).val(val); // also update the form element 
    } 
    // now check if valid url 
    // http://docs.jquery.com/Plugins/Validation/Methods/url 
    // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/ 
    return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(val); 
}); 

Następnie:

$("#form1").validate({ 
    rules: { 
     complete_url:true 
    } 
}); 

Od http://www.robsearles.com/2010/05/jquery-validate-url-adding-http/

Answer 2

udało mi się zrobić to praca bez błędów, oto kod JS użyłem:

$(document).ready(function(){ 

    function validateURL(value){ 
     // URL validation from http://stackoverflow.com/questions/3809401/what-is-a-good-regular-expression-to-match-a-url 
     var expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi; 
     var regex = new RegExp(expression); 
     return value.match(regex); 
    } 

    $.validator.addMethod("urlvalidation", function(value, element) { 
     return this.optional(element) || validateURL(value); 
    }, "URL is not valid"); 

    $('#frm_validation').validate({ 
     rules : { 
      urlvalidation : { urlvalidation : true } 
     } 
    }); 

});​ 

Można zobaczyć go w akcji na this JSFiddle.