Convalida jQuery: come aggiungere una regola per la convalida delle espressioni regolari?

240

Sto usando il plugin di validazione jQuery . Roba fantastica! Voglio migrare la mia soluzione ASP.NET esistente per usare jQuery invece dei validatori ASP.NET. Mi manca un sostituto per il validatore di espressioni regolari . Voglio essere in grado di fare qualcosa del genere:

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

Come posso aggiungere una regola personalizzata per raggiungere questo obiettivo?

jquery  regex  jquery-validate 
— PeterFromCologne
fonte
1
Si prega di dire che si sta verificando il lato server di input e non si sta basando solo sulla convalida lato client, poiché questo può ovviamente essere disattivato.
— S Philp,
ovviamente! :-) La convalida sul server è d'obbligo
— PeterFromCologne,
121
OMG NON ha convalida regex ?!
— Andrei Rînea,
4
Voglio dire, chi vorrebbe regex per la convalida comunque ... ...;)
— jamiebarrow

Risposte:

329

Grazie alla risposta di redsquare ho aggiunto un metodo come questo:

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

ora tutto ciò che devi fare per convalidare contro qualsiasi regex è questo:

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

Inoltre, sembra che esista un file chiamato additional-method.js che contiene il metodo "pattern", che può essere RegExp quando viene creato usando il metodo senza virgolette.

modificare

La patternfunzione è ora il modo preferito per farlo, facendo l'esempio:

 $("#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
fonte
4
$ ("Casella di testo") dovrebbe essere $ ("# Casella di testo").
— Ryan Shripat,
3
Avrei lasciato che RegExp fosse definito al di fuori del metodo come un valore letterale, anziché l'invocazione da una stringa ..
— Tracker1
3
questo è super utile e dovrebbe essere incluso in jquery :(
— Grahame A
3
Oppure aggiungilo al validatore in questo modo: ... regole: {textbox_input_name_attr: {richiesto: vero, regex: "^ [a-zA-Z '. \\ s] {1,50} $"}}, ... .
— Hans Kerkhof
2
Inserisci un messaggio personalizzato come questo: $ ('# element'). Rules ('add', {regex: / [abc] /, messages {regex: "custom message '}});
— naspinski,
80

Puoi usare addMethod ()

per esempio 

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

buon articolo qui https://web.archive.org/web/20130609222116/http://www.randallmorey.com/blog/2008/mar/16/extending-jquery-form-validation-plugin/

— redsquare
fonte
6
Non rispondere davvero alla domanda. Cosa succede se si desidera una regola regex generale? Con questa risposta dovresti aggiungereMethod per ogni regex differente.
— AndreasN,
43

Ho avuto dei problemi nel mettere insieme tutti i pezzi per fare un validatore di espressioni regolari jQuery, ma l'ho fatto funzionare ... Ecco un esempio di lavoro completo. Utilizza il plug-in 'Convalida' che si trova nel plug-in di convalida 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
fonte
25

Nessun motivo per definire il regex come una stringa.

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

e

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

va meglio così, no?

— Sam
fonte
quale js è richiesto per questo?
— Bhavik Ambani,
In realtà, ho appena trovato un problema con questo. Se usi il flag g otterrai risultati incoerenti. La bandiera g crea apparentemente il proprio indice (vedi: stackoverflow.com/questions/209732/… ). Quindi è necessario ridefinire il regex IN la funzione in modo che venga ricreata ogni volta che viene chiamato.
— rob_james,
1
Per aggiungere a ciò: definiscilo ancora come regex, come sopra (o avrai problemi con stringa> conversione regex con flag) MA in più ha ancora bisogno var re = new RegExp(regexp);della funzione
— rob_james
24

Estendere un po 'la risposta di 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."
);

Ciò consentirebbe di passare un oggetto regex alla regola.

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

Il ripristino della lastIndexproprietà è necessario quando l' gopzione -flag è impostata RegExpsull'oggetto. Altrimenti inizierebbe a convalidare dalla posizione dell'ultima corrispondenza con quella regex, anche se la stringa del soggetto è diversa.

Qualche altra idea che ho avuto è stata quella di consentirti di usare array di regex e un'altra regola per la negazione di regex:

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

Ma implementarli sarebbe forse troppo.

— Markus Jarderot
fonte
Voglio la convalida delle espressioni regolari in forma aggiuntiva di JQgrid. Come lo posso fare ?
— Bhavik Ambani,
@BhavikAmbani È possibile utilizzare una funzione personalizzata per la convalida. Vedi la wiki per un esempio.
— Markus Jarderot,
19

Come menzionato nella documentazione addMethod :

Nota: mentre la tentazione è ottima di aggiungere un metodo regex che controlla il suo parametro rispetto al valore, è molto più pulito incapsulare quelle espressioni regolari all'interno del proprio metodo. Se hai bisogno di molte espressioni leggermente diverse, prova a estrarre un parametro comune. Una libreria di espressioni regolari: http://regexlib.com/DisplayPatterns.aspx

Quindi sì, devi aggiungere un metodo per ogni espressione regolare. Il sovraccarico è minimo, mentre ti consente di dare alla regex un nome (da non sottovalutare), un messaggio predefinito (utile) e la possibilità di riutilizzarlo in vari punti, senza duplicare più volte la regex stessa.

— Jörn Zaefferer
fonte
La tua risposta è molto apprezzata! Grazie. Ci penserò di nuovo. Nel nostro caso la validazione Regex sembrava essere la soluzione migliore. Tuttavia capisco il tuo punto nell'uso delle convalide "nominate" ...
— PeterFromCologne,
Voglio la convalida delle espressioni regolari in forma aggiuntiva di JQgrid. Come lo posso fare ?
— Bhavik Ambani,
14

L'ho fatto funzionare in questo modo:

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

Assicurati che la regex sia tra /:-)

— Kris Nobels
fonte
Voglio la convalida delle espressioni regolari in forma aggiuntiva di JQgrid. Come lo posso fare ?
— Bhavik Ambani,
12

È possibile utilizzare patterndefinito nel additional-methods.jsfile. Nota che questo file additional-method.js deve essere incluso dopo la dipendenza jQuery Convalida, quindi puoi semplicemente usare

$("#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>
Espandi frammento

— Wiktor Stribiżew
fonte
5

Questo è un codice funzionante.

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

usiamo principalmente la notazione markup del plugin di validazione jquery e gli esempi pubblicati non hanno funzionato per noi, quando sono presenti flag nel regex, ad es.

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

pertanto utilizziamo il seguente frammento

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

Naturalmente ora si potrebbe combinare questo codice, con uno dei precedenti per consentire anche il passaggio di oggetti RegExp nel plugin, ma poiché non ne avevamo bisogno abbiamo lasciato questo esercizio per il lettore ;-).

PS: esiste anche un plugin in bundle per questo, https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js

— staabm
fonte
1

Questo ha funzionato per me, essendo una delle regole di convalida:

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

Spero che sia d'aiuto

— Bogdan Mates
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.