jQuery validate: Wie füge ich eine Regel für die Validierung regulärer Ausdrücke hinzu?

240

Ich verwende das jQuery- Validierungs-Plugin . Tolles Zeug! Ich möchte meine vorhandene ASP.NET-Lösung migrieren, um jQuery anstelle der ASP.NET-Validatoren zu verwenden. Mir fehlt ein Ersatz für den Validator für reguläre Ausdrücke . Ich möchte in der Lage sein, so etwas zu tun:

$("Textbox").rules("add", { regularExpression: "^[a-zA-Z'.\s]{1,40}$" })

Wie füge ich eine benutzerdefinierte Regel hinzu , um dies zu erreichen?

jquery  regex  jquery-validate 
— PeterFromCologne
quelle
1
Angenommen, Sie überprüfen die Seite des Eingabeservers und verlassen sich nicht nur auf die clientseitige Validierung, da diese natürlich deaktiviert werden kann.
— S Philp
natürlich! :-) Validierung auf dem Server ist ein Muss
— PeterFromCologne
121
Oh mein Gott, es gibt keine Regex-Validierung?!
— Andrei Rînea
4
Ich meine, wer würde sowieso Regex zur Validierung wollen ... ...;)
— Jamiebarrow

Antworten:

329

Dank der Antwort von redsquare habe ich eine Methode wie diese hinzugefügt:

$.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        },
        "Please check your input."
);

Jetzt müssen Sie nur noch Folgendes tun, um sich gegen Regex zu validieren:

$("#Textbox").rules("add", { regex: "^[a-zA-Z'.\\s]{1,40}$" })

Außerdem sieht es so aus, als gäbe es eine Datei namens Additional-Methods.js, die die Methode "Muster" enthält, die ein RegExp sein kann, wenn sie mit der Methode ohne Anführungszeichen erstellt wird.

Bearbeiten

Die patternFunktion ist jetzt der bevorzugte Weg, um dies zu tun. Beispiel:

 $("#Textbox").rules("add", { pattern: "^[a-zA-Z'.\\s]{1,40}$" })

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.js

— PeterFromCologne
quelle
4
$ ("Textbox") sollte $ ("# Textbox") sein.
— Ryan Shripat
3
Ich hätte das RegExp außerhalb der Methode als Literal definiert, anstatt den Aufruf von einer Zeichenfolge.
— Tracker1
3
Dies ist sehr nützlich und sollte in jquery enthalten sein :(
— Grahame A
3
Oder fügen Sie es dem Validator wie folgt hinzu: ... Regeln: {textbox_input_name_attr: {erforderlich: true, Regex: "^ [a-zA-Z '. \\ s] {1,50} $"}}, ... .
— Hans Kerkhof
2
Sie geben eine benutzerdefinierte Nachricht wie folgt ein: $ ('# element'). Rules ('add', {regex: / [abc] /, messages {regex: "custom message '}});
— naspinski
80

Sie können die addMethod () verwenden

z.B 

$.validator.addMethod('postalCode', function (value) { 
    return /^((\d{5}-\d{4})|(\d{5})|([A-Z]\d[A-Z]\s\d[A-Z]\d))$/.test(value); 
}, 'Please enter a valid US or Canadian postal code.');

guter Artikel hier https://web.archive.org/web/20130609222116/http://www.randallmorey.com/blog/2008/mar/16/extending-jquery-form-validation-plugin/

— rotes Quadrat
quelle
6
Beantworte die Frage nicht wirklich. Was ist, wenn Sie eine allgemeine Regex-Regel wünschen? Mit dieser Antwort müssten Sie Method für jeden anderen regulären Ausdruck hinzufügen.
— AndreasN
43

Ich hatte einige Probleme, alle Teile für einen jQuery-Validator für reguläre Ausdrücke zusammenzustellen, aber ich habe es zum Laufen gebracht ... Hier ist ein vollständiges Arbeitsbeispiel. Es verwendet das 'Validation'-Plugin, das sich im jQuery Validation Plugin befindet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://YOURJQUERYPATH/js/jquery.js" type="text/javascript"></script>
    <script src="http://YOURJQUERYPATH/js/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript">

        $().ready(function() {
            $.validator.addMethod("EMAIL", function(value, element) {
                return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
            }, "Email Address is invalid: Please enter a valid email address.");

            $.validator.addMethod("PASSWORD",function(value,element){
                return this.optional(element) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/i.test(value);
            },"Passwords are 8-16 characters with uppercase letters, lowercase letters and at least one number.");

            $.validator.addMethod("SUBMIT",function(value,element){
                return this.optional(element) || /[^ ]/i.test(value);
            },"You did not click the submit button.");

            // Validate signup form on keyup and submit
            $("#LOGIN").validate({
                rules: {
                    EMAIL: "required EMAIL",
                    PASSWORD: "required PASSWORD",
                    SUBMIT: "required SUBMIT",
                },
            });
        });
    </script>
</head>
<body>
    <div id="LOGIN_FORM" class="form">
        <form id="LOGIN" name="LOGIN" method="post" action="/index/secure/authentication?action=login">
            <h1>Log In</h1>
            <div id="LOGIN_EMAIL">
                <label for="EMAIL">Email Address</label>
                <input id="EMAIL" name="EMAIL" type="text" value="" tabindex="1" />
            </div>
            <div id="LOGIN_PASSWORD">
                <label for="PASSWORD">Password</label>
                <input id="PASSWORD" name="PASSWORD" type="password" value="" tabindex="2" />
            </div>
            <div id="LOGIN_SUBMIT">
                <input id="SUBMIT" name="SUBMIT" type="submit" value="Submit" tabindex="3" />
            </div>
        </form>
    </div>
</body>
</html>
— bshack
quelle
25

Kein Grund, den regulären Ausdruck als Zeichenfolge zu definieren.

$.validator.addMethod(
    "regex",
    function(value, element, regexp) {
        var check = false;
        return this.optional(element) || regexp.test(value);
    },
    "Please check your input."
);

und

telephone: { required: true, regex : /^[\d\s]+$/, minlength: 5 },

Ist das besser so, nein?

— Sam
quelle
welches js wird dafür benötigt?
— Bhavik Ambani
Eigentlich habe ich gerade ein Problem damit gefunden. Wenn Sie das g-Flag verwenden, erhalten Sie inkonsistente Ergebnisse. Das g-Flag erstellt anscheinend einen eigenen Index (siehe: stackoverflow.com/questions/209732/… ). Sie müssen also den regulären Ausdruck IN der Funktion neu definieren, damit er bei jedem Aufruf neu erstellt wird.
— Rob_James
1
Um das hinzuzufügen: Definieren Sie es immer noch als regulären Ausdruck, wie oben (oder Sie haben Probleme mit der Konvertierung von Zeichenfolgen> var re = new RegExp(regexp);
— regulären Ausdrücken
24

Die Antwort von PeterTheNiceGuy etwas erweitern:

$.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            if (regexp.constructor != RegExp)
                regexp = new RegExp(regexp);
            else if (regexp.global)
                regexp.lastIndex = 0;
            return this.optional(element) || regexp.test(value);
        },
        "Please check your input."
);

Auf diese Weise können Sie ein Regex-Objekt an die Regel übergeben.

$("Textbox").rules("add", { regex: /^[a-zA-Z'.\s]{1,40}$/ });

Das Zurücksetzen der lastIndexEigenschaft ist erforderlich, wenn das gFlag für das RegExpObjekt gesetzt ist. Andernfalls wird die Validierung ab der Position der letzten Übereinstimmung mit diesem regulären Ausdruck gestartet, selbst wenn die Betreffzeichenfolge unterschiedlich ist.

Einige andere Ideen, die ich hatte, waren, Ihnen die Verwendung von Regex-Arrays zu ermöglichen, und eine andere Regel für die Negation von Regex:

$("password").rules("add", {
    regex: [
        /^[a-zA-Z'.\s]{8,40}$/,
        /^.*[a-z].*$/,
        /^.*[A-Z].*$/,
        /^.*[0-9].*$/
    ],
    '!regex': /password|123/
});

Aber diese umzusetzen wäre vielleicht zu viel.

— Markus Jarderot
quelle
Ich möchte die Validierung regulärer Ausdrücke in Form von JQgrid hinzufügen. Wie kann ich das machen ?
— Bhavik Ambani
@ BhavikAmbani Sie können eine benutzerdefinierte Funktion zur Validierung verwenden. Ein Beispiel finden Sie im Wiki .
— Markus Jarderot
19

Wie in der addMethod-Dokumentation erwähnt :

Bitte beachten Sie: Während die Versuchung groß ist, eine Regex-Methode hinzuzufügen, die ihren Parameter mit dem Wert vergleicht, ist es viel sauberer, diese regulären Ausdrücke in ihrer eigenen Methode zu kapseln. Wenn Sie viele leicht unterschiedliche Ausdrücke benötigen, versuchen Sie, einen gemeinsamen Parameter zu extrahieren. Eine Bibliothek mit regulären Ausdrücken: http://regexlib.com/DisplayPatterns.aspx

Ja, Sie müssen für jeden regulären Ausdruck eine Methode hinzufügen. Der Overhead ist minimal, während Sie dem regulären Ausdruck einen Namen (nicht zu unterschätzen), eine Standardnachricht (praktisch) und die Möglichkeit geben können, ihn an verschiedenen Stellen wiederzuverwenden, ohne den regulären Ausdruck selbst immer wieder zu duplizieren.

— Jörn Zaefferer
quelle
Ihre Antwort wird sehr geschätzt! Vielen Dank. Ich werde noch einmal darüber nachdenken. In unserem Fall schien die Regex-Validierung am besten zu passen. Ich verstehe jedoch, dass Sie "benannte" Validierungen verwenden ...
— PeterFromCologne
Ich möchte die Validierung regulärer Ausdrücke in Form von JQgrid hinzufügen. Wie kann ich das machen ?
— Bhavik Ambani
14

Ich habe es so gemacht:

$.validator.addMethod(
    "regex",
    function(value, element, regexp) {
        return this.optional(element) || regexp.test(value);
    },
    "Please check your input."
);


$(function () {
    $('#uiEmailAdress').focus();
    $('#NewsletterForm').validate({
        rules: {
            uiEmailAdress:{
                required: true,
                email: true,
                minlength: 5
            },
            uiConfirmEmailAdress:{
                required: true,
                email: true,
                equalTo: '#uiEmailAdress'
            },
            DDLanguage:{
                required: true
            },
            Testveld:{
                required: true,
                regex: /^[0-9]{3}$/
            }
        },
        messages: {
            uiEmailAdress:{
                required: 'Verplicht veld',
                email: 'Ongeldig emailadres',
                minlength: 'Minimum 5 charaters vereist'
            },
            uiConfirmEmailAdress:{
                required: 'Verplicht veld',
                email: 'Ongeldig emailadres',
                equalTo: 'Veld is niet gelijk aan E-mailadres'
            },
            DDLanguage:{
                required: 'Verplicht veld'
            },
            Testveld:{
                required: 'Verplicht veld',
                regex: '_REGEX'
            }
        }
    });
});

Stellen Sie sicher, dass der reguläre Ausdruck zwischen /:-) liegt

— Kris Nobels
quelle
Ich möchte die Validierung regulärer Ausdrücke in Form von JQgrid hinzufügen. Wie kann ich das machen ?
— Bhavik Ambani
12

Sie können patternin der additional-methods.jsDatei definiert verwenden. Beachten Sie, dass diese Datei "Additional-methods.js" nach der jQuery Validate-Abhängigkeit enthalten sein muss. Dann können Sie sie einfach verwenden

$("#frm").validate({
    rules: {
        Textbox: {
            pattern: /^[a-zA-Z'.\s]{1,40}$/
        },
    },
    messages: {
        Textbox: {
            pattern: 'The Textbox string format is invalid'
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<form id="frm" method="get" action="">
    <fieldset>
        <p>
            <label for="fullname">Textbox</label>
            <input id="Textbox" name="Textbox" type="text">
        </p>
    </fieldset>
</form>
Erweitern Sie das Snippet

— Wiktor Stribiżew
quelle
5

Dies ist Arbeitscode.

function validateSignup()
{   
    $.validator.addMethod(
            "regex",
            function(value, element, regexp) 
            {
                if (regexp.constructor != RegExp)
                    regexp = new RegExp(regexp);
                else if (regexp.global)
                    regexp.lastIndex = 0;
                return this.optional(element) || regexp.test(value);
            },
            "Please check your input."
    );

    $('#signupForm').validate(
    {

        onkeyup : false,
        errorClass: "req_mess",
        ignore: ":hidden",
        validClass: "signup_valid_class",
        errorClass: "signup_error_class",

        rules:
        {

            email:
            {
                required: true,
                email: true,
                regex: /^[A-Za-z0-9_]+\@[A-Za-z0-9_]+\.[A-Za-z0-9_]+/,
            },

            userId:
            {
                required: true,
                minlength: 6,
                maxlength: 15,
                regex: /^[A-Za-z0-9_]{6,15}$/,
            },

            phoneNum:
            {
                required: true,
                regex: /^[+-]{1}[0-9]{1,3}\-[0-9]{10}$/,
            },

        },
        messages: 
        {
            email: 
            {
                required: 'You must enter a email',
                regex: 'Please enter a valid email without spacial chars, ie, Example@gmail.com'
            },

            userId:
            {
                required: 'Alphanumeric, _, min:6, max:15',
                regex: "Please enter any alphaNumeric char of length between 6-15, ie, sbp_arun_2016"
            },

            phoneNum: 
            {
                required: "Please enter your phone number",
                regex: "e.g. +91-1234567890"    
            },

        },

        submitHandler: function (form)
        {
            return true;
        }
    });
}
— ArunDhwaj IIITH
quelle
3

Wir verwenden hauptsächlich die Markup-Notation des JQuery-Validierungs-Plugins und die veröffentlichten Beispiele haben bei uns nicht funktioniert, wenn Flags im regulären Ausdruck vorhanden sind, z

<input type="text" name="myfield" regex="/^[0-9]{3}$/i" />

Deshalb verwenden wir das folgende Snippet

$.validator.addMethod(
        "regex",
        function(value, element, regstring) {
            // fast exit on empty optional
            if (this.optional(element)) {
                return true;
            }

            var regParts = regstring.match(/^\/(.*?)\/([gim]*)$/);
            if (regParts) {
                // the parsed pattern had delimiters and modifiers. handle them. 
                var regexp = new RegExp(regParts[1], regParts[2]);
            } else {
                // we got pattern string without delimiters
                var regexp = new RegExp(regstring);
            }

            return regexp.test(value);
        },
        "Please check your input."
);

Natürlich könnte man jetzt diesen Code mit einem der oben genannten kombinieren, um auch die Übergabe von RegExp-Objekten an das Plugin zu ermöglichen, aber da wir ihn nicht brauchten, haben wir diese Übung dem Leser überlassen ;-).

PS: Dafür gibt es auch ein Plugin, https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js

— staabm
quelle
1

Dies funktionierte für mich als eine der Validierungsregeln:

    Zip: {
                required: true,
                regex: /^\d{5}(?:[-\s]\d{4})?$/
            }

Ich hoffe es hilft

— Bogdan Kumpels
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.