jQuery validate: Como adicionar uma regra para validação de expressão regular?

240

Estou usando o plug-in de validação jQuery . Coisas boas! Desejo migrar minha solução ASP.NET existente para usar o jQuery em vez dos validadores do ASP.NET. Estou faltando um substituto para o validador de expressão regular . Eu quero ser capaz de fazer algo assim:

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

Como adiciono uma regra personalizada para conseguir isso?

jquery  regex  jquery-validate 
— PeterFromCologne
fonte
1
Diga que você está verificando o lado do servidor de entrada e não confiando apenas na validação do lado do cliente, pois isso pode obviamente ser desativado.
— S Philp
claro! :-) A validação no servidor é uma obrigação #
— PeterFromCologne
121
OMG, ele não tem validação de regex ?!
— Andrei Rînea 08/12/2009
4
Quer dizer, quem iria querer regex para validação de qualquer maneira ... ...;)
— jamiebarrow

Respostas:

329

Graças à resposta do redsquare, adicionei um método como este:

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

Agora, tudo o que você precisa fazer para validar contra qualquer regex é o seguinte:

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

Além disso, parece que existe um arquivo chamado additional-methods.js que contém o método "pattern", que pode ser um RegExp quando criado usando o método sem aspas.

Editar

A patternfunção agora é a maneira preferida de fazer isso, criando o exemplo:

 $("#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
$ ("Caixa de texto") deve ser $ ("# Caixa de texto").
— Ryan Shripat
3
Eu teria que deixar o RegExp ser definido fora do método como um literal, em vez da invocação de uma cadeia ..
— Tracker1
3
isso é super útil e deve ser incluído no jquery :(
— Grahame A
3
Ou adicione-o ao validador como este: ... rules: {textbox_input_name_attr: {required: true, regex: "^ [a-zA-Z '. \\ s] {1,50} $"}}, ... .
— Hans Kerkhof
2
Você insere uma mensagem personalizada como esta: $ ('# element'). Rules ('add', {regex: / [abc] /, messages {regex: "mensagem personalizada '}});
— naspinski
80

Você pode usar o addMethod ()

por exemplo 

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

bom artigo aqui https://web.archive.org/web/20130609222116/http://www.randallmorey.com/blog/2008/mar/16/extending-jquery-form-validation-plugin/

— quadrado vermelho
fonte
6
Realmente não responda a pergunta. E se você quiser uma regra geral de regex? Com esta resposta, você teria que adicionar o método para cada regex diferente.
— 27530 AndreasN
43

Eu tive alguns problemas para montar todas as peças para executar um validador de expressão regular do jQuery, mas consegui que funcionasse ... Aqui está um exemplo completo de trabalho. Ele usa o plug-in 'Validação', que pode ser encontrado no plug-in de validação 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

Não há razão para definir o regex como uma sequência.

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

é melhor assim, não?

— Sam
fonte
js é necessário para isso?
— Bhavik Ambani
Na verdade, acabei de encontrar um problema com isso. Se você usar o sinalizador g, obterá resultados inconsistentes. Aparentemente, o sinalizador g cria seu próprio índice (consulte: stackoverflow.com/questions/209732/… ). Portanto, você precisa redefinir a regex IN na função para que ela seja recriada toda vez que for chamada.
— rob_james
1
Para adicionar a isso: ainda defini-lo como um regex, como acima (ou você vai ter problemas com string> conversão regex com bandeiras), mas além disso ele ainda precisa as var re = new RegExp(regexp);na função
— rob_james
24

Estendendo a resposta de PeterTheNiceGuy um pouco:

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

Isso permitiria que você passasse um objeto regex para a regra.

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

A redefinição da lastIndexpropriedade é necessária quando o gsinalizador-é definido no RegExpobjeto. Caso contrário, começaria a validar a partir da posição da última correspondência com essa regex, mesmo que a sequência de assunto seja diferente.

Algumas outras idéias que tive foram: permitir o uso de matrizes de regex e outra regra para a negação de regex:

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

Mas implementá-las talvez fosse demais.

— Markus Jarderot
fonte
Eu quero validação de expressão regular no formulário add do JQgrid. Como eu posso fazer isso ?
— Bhavik Ambani
@BhavikAmbani Você pode usar uma função personalizada para validação. Veja o wiki para um exemplo.
— Markus Jarderot
19

Conforme mencionado na documentação addMethod :

Observe: Embora a tentação seja grande de adicionar um método regex que verifique seu parâmetro em relação ao valor, é muito mais fácil encapsular essas expressões regulares dentro de seu próprio método. Se você precisar de muitas expressões ligeiramente diferentes, tente extrair um parâmetro comum. Uma biblioteca de expressões regulares: http://regexlib.com/DisplayPatterns.aspx

Então, sim, você deve adicionar um método para cada expressão regular. A sobrecarga é mínima, enquanto permite que você dê um nome à regex (que não deve ser subestimado), uma mensagem padrão (útil) e a capacidade de reutilizá-la em vários locais, sem duplicar a própria regex repetidamente.

— Jörn Zaefferer
fonte
Sua resposta é muito apreciada! Obrigado. Vou pensar sobre isso novamente. No nosso caso, a validação Regex parecia ser a melhor opção. No entanto, eu entendo seu ponto em usar "nomeadas" validações ...
— PeterFromCologne
Eu quero validação de expressão regular no formulário add do JQgrid. Como eu posso fazer isso ?
— Bhavik Ambani
14

Eu consegui funcionar assim:

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

Verifique se o regex está entre /:-)

— Kris Nobels
fonte
Eu quero validação de expressão regular no formulário add do JQgrid. Como eu posso fazer isso ?
— Bhavik Ambani
12

Você pode usar patterndefinido no additional-methods.jsarquivo. Observe que esse arquivo method -js adicionais deve ser incluído após o jQuery Validar dependência, e você pode simplesmente usar

$("#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>
Expandir snippet

— Wiktor Stribiżew
fonte
5

Este é um código de trabalho.

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

usamos principalmente a notação de marcação do plug-in de validação de jquery e as amostras postadas não funcionaram para nós, quando bandeiras estão presentes no regex, por exemplo

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

portanto, usamos o seguinte trecho

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

É claro que agora é possível combinar esse código, com um dos itens acima, para também permitir a passagem de objetos RegExp para o plug-in, mas como não precisamos dele, deixamos esse exercício para o leitor ;-).

PS: também há um plug-in incluído, https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js

— staabm
fonte
1

Isso funcionou para mim, sendo uma das regras de validação:

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

Espero que ajude

— Bogdan Mates
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.