jQuery validate: comment ajouter une règle pour la validation des expressions régulières?

240

J'utilise le plugin de validation jQuery . Super truc! Je souhaite migrer ma solution ASP.NET existante pour utiliser jQuery au lieu des validateurs ASP.NET. Il me manque un remplacement pour le validateur d' expression régulière . Je veux pouvoir faire quelque chose comme ça:

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

Comment ajouter une règle personnalisée pour y parvenir?

jquery  regex  jquery-validate 
— PeterFromCologne
source
1
Veuillez dire que vous vérifiez le côté du serveur d'entrée et que vous ne comptez pas uniquement sur la validation côté client car cela peut évidemment être désactivé.
— S Philp
bien sûr! :-) La validation sur le serveur est un must
— PeterFromCologne
121
OMG il N'A PAS de validation d'expression régulière?!
— Andrei Rînea
4
Je veux dire, qui voudrait des regex pour validation de toute façon ... ...;)
— jamiebarrow

Réponses:

329

Grâce à la réponse de redsquare j'ai ajouté une méthode comme celle-ci:

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

maintenant, tout ce que vous devez faire pour valider contre toute expression régulière est le suivant:

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

De plus, il semble qu'il existe un fichier appelé additional-methods.js qui contient la méthode "pattern", qui peut être un RegExp lorsqu'il est créé à l'aide de la méthode sans guillemets.

Éditer

La patternfonction est désormais le moyen préféré de le faire, ce qui donne l'exemple:

 $("#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
source
4
$ ("Textbox") doit être $ ("# Textbox").
— Ryan Shripat
3
J'aurais laissé le RegExp être défini en dehors de la méthode comme un littéral, au lieu de l'invocation d'une chaîne ..
— Tracker1
3
c'est super utile et devrait être inclus dans jquery :(
— Grahame A
3
Ou ajoutez-le au validateur comme ceci: ... règles: {textbox_input_name_attr: {requis: vrai, expression régulière: "^ [a-zA-Z '. \\ s] {1,50} $"}}, ... .
— Hans Kerkhof
2
Vous entrez un message personnalisé comme celui-ci: $ ('# element'). Rules ('add', {regex: / [abc] /, messages {regex: "custom message '}});
— naspinski
80

Vous pouvez utiliser la méthode addMethod ()

par exemple 

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

bon article ici https://web.archive.org/web/20130609222116/http://www.randallmorey.com/blog/2008/mar/16/extending-jquery-form-validation-plugin/

— carré rouge
source
6
Ne répondez pas vraiment à la question. Et si vous voulez une règle d'expression régulière générale? Avec cette réponse, vous devrez ajouter une méthode pour chaque expression différente.
— AndreasN
43

J'ai eu du mal à rassembler toutes les pièces pour faire un validateur d'expressions régulières jQuery, mais je l'ai fait fonctionner ... Voici un exemple de travail complet. Il utilise le plugin 'Validation' qui se trouve dans le plugin de validation jQuery

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

Aucune raison de définir l'expression régulière comme une chaîne.

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

et

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

c'est mieux comme ça, non?

— Sam
source
quel js est requis pour cela?
— Bhavik Ambani
En fait, je viens de trouver un problème avec cela. Si vous utilisez l'indicateur g, vous obtiendrez des résultats incohérents. Le drapeau g crée apparemment son propre index (voir: stackoverflow.com/questions/209732/… ). Vous devez donc redéfinir l'expression régulière dans la fonction afin qu'elle soit recréée à chaque appel.
— rob_james
1
Pour ajouter à cela: définissez-le toujours comme une expression régulière, comme ci-dessus (ou vous aurez des problèmes avec la chaîne> conversion regex avec des drapeaux) MAIS en plus, il a toujours besoin de la var re = new RegExp(regexp);dans la fonction
— rob_james
24

Étendre un peu la réponse de PeterTheNiceGuy:

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

Cela vous permettrait de passer un objet regex à la règle.

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

La réinitialisation de la lastIndexpropriété est nécessaire lorsque le gdrapeau est défini sur l' RegExpobjet. Sinon, il commencerait à valider à partir de la position de la dernière correspondance avec cette expression régulière, même si la chaîne du sujet est différente.

Quelques autres idées que j'avais était de vous permettre d'utiliser des tableaux de regex, et une autre règle pour la négation des regex:

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

Mais leur mise en œuvre serait peut-être trop.

— Markus Jarderot
source
Je veux une validation d'expression régulière sous forme d'ajout de JQgrid. Comment puis je faire ça ?
— Bhavik Ambani
@BhavikAmbani Vous pouvez utiliser une fonction personnalisée pour la validation. Voir le wiki pour un exemple.
— Markus Jarderot
19

Comme mentionné dans la documentation addMethod :

Remarque: Bien que la tentation soit grande d'ajouter une méthode d'expression régulière qui vérifie son paramètre par rapport à la valeur, il est beaucoup plus propre d'encapsuler ces expressions régulières dans leur propre méthode. Si vous avez besoin de nombreuses expressions légèrement différentes, essayez d'extraire un paramètre commun. Une bibliothèque d'expressions régulières: http://regexlib.com/DisplayPatterns.aspx

Alors oui, vous devez ajouter une méthode pour chaque expression régulière. Les frais généraux sont minimes, tout en vous permettant de donner un nom (à ne pas sous-estimer) au regex, un message par défaut (pratique) et la possibilité de le réutiliser à divers endroits, sans dupliquer le regex lui-même encore et encore.

— Jörn Zaefferer
source
Votre réponse est très appréciée! Merci. J'y repenserai. Dans notre cas, la validation Regex semblait être la meilleure solution. Cependant, je comprends votre point en utilisant des validations "nommées" ...
— PeterFromCologne
Je veux une validation d'expression régulière sous forme d'ajout de JQgrid. Comment puis je faire ça ?
— Bhavik Ambani
14

Je l'ai fait fonctionner comme ceci:

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

Assurez-vous que l'expression régulière se situe entre /:-)

— Kris Nobels
source
Je veux une validation d'expression régulière sous forme d'ajout de JQgrid. Comment puis je faire ça ?
— Bhavik Ambani
12

Vous pouvez utiliser patterndéfini dans le additional-methods.jsfichier. Notez que ce fichier additional-methods.js doit être inclus après la dépendance jQuery Validate, alors vous pouvez simplement utiliser

$("#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>
Développer l'extrait

— Wiktor Stribiżew
source
5

C'est du code qui fonctionne.

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
source
3

nous utilisons principalement la notation de balisage du plugin de validation jquery et les exemples publiés ne fonctionnaient pas pour nous, lorsque des drapeaux sont présents dans l'expression régulière, par exemple

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

nous utilisons donc l'extrait de code suivant

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

Bien sûr, maintenant, on pourrait combiner ce code, avec l'un des ci-dessus pour permettre également de passer des objets RegExp dans le plugin, mais comme nous n'en avions pas besoin, nous avons laissé cet exercice au lecteur ;-).

PS: il existe également un plugin fourni pour cela, https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js

— staabm
source
1

Cela a fonctionné pour moi, étant l'une des règles de validation:

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

J'espère que ça aide

— Bogdan Mates
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.