Gewusst wie: erweitern jquery.validate-URL-Validierung?

Habe ich eine Notwendigkeit für die Benutzer erstellen zu können, teilweise URLs, ohne geben Sie die vollständige URL und das jedes mal.

Zum Beispiel, sagen, ich plan auf dem url www.example.com/areas/{userinput}/home. Ich möchte die Benutzer werden in der Lage, geben Sie text in ein Textfeld, und ich möchte, um zu überprüfen, ob es eine gültige URL.

Den URL-validator-Funktionen wie diese:

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

Ich habe versucht, das hinzufügen eines validation-Methode der validator über die folgenden: 

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

Jedoch, wenn das Formular validiert und meine extension aufgerufen wird, bekomme ich immer diese Fehlermeldung:

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 sieht eine Methode für die $.validator Objekt, aber ich kann nicht herausfinden, wie Sie zum aufrufen der validator-url-Methode.

InformationsquelleAutor scottm | 2012-10-17
  1. 16

    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);
});

    Dann:

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

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

    • if(!/^(https?|ftp):\/\//ich.test(val)) { Diese Zeile ist auskommentiert wegen des //
    • Es gibt also keine Möglichkeit, die oben genannten arbeiten genau
    • Dieser code funktioniert nicht.
    • Dein code ist, fehlt this.optional(element)... ziemlich wichtige Dinge. Ohne Sie, Sie kann nicht lassen Sie dieses Feld leer, selbst wenn das Feld optional sein!
    InformationsquelleAutor Barno
  2. 2

    Habe ich es geschafft, damit es funktioniert, ohne Fehler, hier der JS code, den ich verwendet:

    $(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 }
      }
    });  

});​

    , Können Sie es in Aktion auf dieses JSFiddle.

    • Dies erfordert weiterhin, dass ich kopieren Sie die regex. Es muss möglich sein, um meine url von Benutzereingaben, bevor Sie bestätigen, dass Sie eine gültige URL ein, und rufen dann den internen URL-Validierung der Methode zur Validierung meiner formatierten string.
    • Ok, ich habe nicht verstanden, dass die Anforderung war, um zu vermeiden, kopieren Sie die regex. In diesem Fall, warum nicht Sie nennen Ihre URL-überprüfung-Funktion wie so return this.optional(element) || urlValidationFunction(value)?
    • Das ist genau das, was ich getan habe und wie in der Frage. Ich landete mit dem Fehler auch in der Frage.
    • Ich bearbeitet meine Antwort, Sag mir, wenn es Ihren Anforderungen genügt.
    • Jeder Weg, Mann ...aber deine Antwort ist korrekt....thnx bro
    InformationsquelleAutor Olivier Payen
Schreibe einen Kommentar