it-swarm.com.de

jQuery validate: Wie füge ich eine Regel für die Validierung von regulären Ausdrücken hinzu?

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. Ich vermisse einen Ersatz für den regulären Ausdruck Validator. 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?

232

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 die Gültigkeit von regulären Ausdrücken zu überprüfen:

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

Darüber hinaus scheint es eine Datei mit dem Namen additional-methods.js zu geben, die die Methode "pattern" enthält. Dies kann eine RegExp-Datei sein, wenn sie mit der Methode ohne Anführungszeichen erstellt wird.

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

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

315

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/

78
redsquare

Ich hatte einige Probleme, alle Teile für einen Validator für reguläre jQuery-Ausdrücke zusammenzustellen, aber ich habe es zum Laufen gebracht ... Hier ist ein vollständiges Arbeitsbeispiel. Es wird das 'Validation'-Plugin verwendet, 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._-][email protected][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>
43
bshack

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 },

das ist besser so, nein?

23
Sam

Die Antwort von PeterTheNiceGuy ein wenig 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 reguläres Objekt an die Regel übergeben.

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

Das Zurücksetzen der Eigenschaft lastIndex ist erforderlich, wenn das Flag g- für das Objekt RegExp gesetzt ist. Andernfalls wird die Überprüfung ab der Position der letzten Übereinstimmung mit dieser Regex gestartet, auch wenn die Betreffzeichenfolge unterschiedlich ist.

Einige andere Ideen, die ich hatte, waren, Ihnen die Verwendung von Arrays von Regex 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 die Umsetzung wäre vielleicht zu viel.

21
Markus Jarderot

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 Aufwand ist minimal, während Sie dem Regex einen Namen (nicht zu unterschätzen), eine Standardnachricht (praktisch) und die Möglichkeit geben können, ihn an verschiedenen Stellen wiederzuverwenden, ohne den Regex selbst immer wieder zu duplizieren.

19
Jörn Zaefferer

Ich habe es so zum Laufen gebracht:

$.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 / :-)

12
Kris Nobels

Sie können pattern verwenden, das in additional-methods.js Datei. Beachten Sie, dass diese Datei additional-methods.js enthalten sein muss after jQuery Abhängigkeit überprüfen, dann können 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>
11

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, [email protected]'
            },

            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;
        }
    });
}
4
ArunDhwaj IIITH

wir verwenden hauptsächlich die Markup-Notation des JQuery-Validierungs-Plugins und die veröffentlichten Samples haben bei uns nicht funktioniert, wenn Flags im Regex 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 diesen Code jetzt mit einem der oben genannten kombinieren, um auch RegExp-Objekte in das Plugin zu übertragen, aber da wir es nicht brauchten, überließen wir diese Übung dem Leser ;-).

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

2
staabm

Dies funktionierte für mich als eine der Validierungsregeln:

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

Ich hoffe es hilft

0
Bogdan Mates