JQuery Validate: Wie füge ich eine Regel für die reguläre Expressionsvalidierung hinzu?

StackOverflow https://stackoverflow.com/questions/280759

  •  07-07-2019
  •  | 
  •  

Frage

Ich benutze 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 die regulären Ausdruck Validator. Ich möchte so etwas tun können:

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

Wie mache ich Fügen Sie eine benutzerdefinierte Regel hinzu um das zu erreichen?

War es hilfreich?

Lösung

Dank der Antwort von RedSquare habe ich eine solche Methode 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 nur gegen Regex validieren, ist Folgendes:

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

Darüber hinaus sieht es so aus, als ob eine Datei namens zusätzlich-methods.js die Methode "Muster" enthält, die beim Erstellen der Methode ohne Anführungszeichen ein Regexp sein kann.

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

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

Andere Tipps

Sie können den 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/

Ich hatte einige Probleme, alle Teile zusammenzustellen, um einen JQuery -Validator für den regulären Ausdruck zu machen, aber ich habe es zum Laufen gebracht ... hier ist ein vollständiges Arbeitsbeispiel. Es verwendet das "Validierungs" -Plugin, das in gefunden werden kann JQuery Validation Plugin

<!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>

Kein Grund, die Regex 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 },

Auf diese Weise besser, nein?

Wie auf dem erwähnt ADDMETHOD -Dokumentation:

Bitte beachten Sie: Während die Versuchung großartig ist, eine Regex -Methode hinzuzufügen, die den Parameter gegen den Wert überprüft, ist es viel sauberer, diese regulären Ausdrücke innerhalb ihrer eigenen Methode zu verkapulieren. Wenn Sie viele leicht unterschiedliche Ausdrücke benötigen, versuchen Sie, einen gemeinsamen Parameter zu extrahieren. Eine Bibliothek regelmäßiger Ausdrücke: 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 Regex einen Namen geben (nicht unterschätzt werden können), eine Standardnachricht (praktisch) und die Fähigkeit, ihn an verschiedenen Stellen wiederzuverwenden, ohne den Regex selbst immer wieder zu duplizieren.

Erweiterung von PetertheniceGuys Antwort ein wenig:

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

Zurücksetzen des lastIndex Eigentum ist notwendig, wenn die g-Flag ist auf dem festgelegt RegExp Objekt. Andernfalls würde es von der Position der letzten Übereinstimmung mit diesem Regex validieren, auch wenn die Subjektzeichenfolge unterschiedlich ist.

Einige andere Ideen, die ich hatte, waren, dass Sie Arrays von Regex und eine andere Regel für die Verneinung von Regex verwenden:

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

Aber die Implementierung dieser wäre vielleicht zu viel.

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 sich der Regex zwischen befindet / :-)

Sie können verwenden pattern definiert in der additional-methods.js Datei. Beachten Sie, dass diese zusätzliche Datei für Methodens.js enthalten sein muss nach jQuery validieren Abhängigkeit, 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>

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

Wir verwenden hauptsächlich die Markup -Notation des JQuery -Validierungs -Plugins und die veröffentlichten Samples funktionierten nicht für uns, wenn Flags in der Regex vorhanden sind, z. B.

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

Deshalb verwenden wir den folgenden Ausschnitt

$.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 nun mit einem der oben genannten kombinieren, um auch Regexp-Objekte in das Plugin zu übergeben, aber da wir ihn nicht brauchten, haben wir diese Übung für den Leser gelassen ;-).

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

Dies funktionierte für mich, da es sich um eine der Validierungsregeln handelte:

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

Ich hoffe es hilft

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top