jQuery validate: ¿Cómo agregar una regla para la validación de expresiones regulares?

240

Estoy usando el complemento de validación jQuery . ¡Buena cosa! Quiero migrar mi solución ASP.NET existente para usar jQuery en lugar de los validadores ASP.NET. Me falta un reemplazo para el validador de expresiones regulares . Quiero poder hacer algo como esto:

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

¿Cómo agrego una regla personalizada para lograr esto?

jquery  regex  jquery-validate 
— PeterFromCologne
fuente
1
Digamos que está verificando el lado del servidor de entrada y no solo confiando en la validación del lado del cliente, ya que esto obviamente puede desactivarse.
— S Philp
¡por supuesto! :-) La validación en el servidor es imprescindible
— PeterFromCologne
121
Dios mío, ¿NO tiene validación de expresiones regulares?
— Andrei Rînea
44
Quiero decir, ¿quién querría regex para la validación de todos modos ... ...;)
— jamiebarrow

Respuestas:

329

Gracias a la respuesta de redsquare agregué un 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."
);

ahora todo lo que necesita hacer para validar contra cualquier expresión regular es esto:

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

Además, parece que hay un archivo llamado additional-method.js que contiene el método "patrón", que puede ser un RegExp cuando se crea utilizando el método sin comillas.

Editar

La patternfunción es ahora la forma preferida de hacer esto, haciendo el ejemplo:

 $("#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
fuente
44
$ ("Textbox") debe ser $ ("# Textbox").
— Ryan Shripat
3
Hubiera dejado que el RegExp se definiera fuera del método como un literal, en lugar de la invocación desde una cadena ..
— Tracker1
3
esto es súper útil y debería incluirse en jquery :(
— Grahame A
3
O agréguelo al validador de esta manera: ... reglas: {textbox_input_name_attr: {requerido: verdadero, expresión regular: "^ [a-zA-Z '. \\ s] {1,50} $"}}, ... .
— Hans Kerkhof
2
Ingrese un mensaje personalizado como este: $ ('# elemento'). Reglas ('agregar', {regex: / [abc] /, messages {regex: "mensaje personalizado '}});
— naspinski
80

Puedes usar addMethod ()

p.ej 

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

buen artículo aquí https://web.archive.org/web/20130609222116/http://www.randallmorey.com/blog/2008/mar/16/extending-jquery-form-validation-plugin/

— cuadrado rojo
fuente
66
Realmente no respondas la pregunta. ¿Qué pasa si quieres una regla general de expresiones regulares? Con esta respuesta, tendría que agregar Método para cada expresión regular diferente.
— AndreasN el
43

Tuve algunos problemas para reunir todas las piezas para hacer un validador de expresiones regulares jQuery, pero lo hice funcionar ... Aquí hay un ejemplo de trabajo completo. Utiliza el complemento 'Validación' que se puede encontrar en 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>
— bshack
fuente
25

No hay razón para definir la expresión regular como una cadena.

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

y

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

Es mejor así, ¿no?

— Sam
fuente
¿Qué js se requiere para esto?
— Bhavik Ambani
En realidad, acabo de encontrar un problema con esto. Si usa la bandera g obtendrá resultados inconsistentes. La bandera g aparentemente crea su propio índice (ver: stackoverflow.com/questions/209732/… ). Por lo tanto, debe redefinir la expresión regular en la función para que se vuelva a crear cada vez que se llame.
— rob_james
1
Para agregar a eso: todavía defínalo como una expresión regular, como se indicó anteriormente (o tendrá problemas con la cadena> conversión de expresiones regulares con banderas) PERO además, todavía necesita el var re = new RegExp(regexp);en la función
— rob_james
24

Extendiendo un poco la respuesta 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."
);

Esto le permitiría pasar un objeto regex a la regla.

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

Restablecer la lastIndexpropiedad es necesario cuando gse establece -flag en el RegExpobjeto. De lo contrario, comenzaría a validarse desde la posición de la última coincidencia con esa expresión regular, incluso si la cadena de asunto es diferente.

Algunas otras ideas que tuve fue permitirle usar matrices de expresiones regulares, y otra regla para la negación de las expresiones regulares:

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

Pero implementarlos podría ser demasiado.

— Markus Jarderot
fuente
Quiero validación de expresión regular en forma agregada de JQgrid. Cómo puedo hacer eso ?
— Bhavik Ambani
@BhavikAmbani Puede usar una función personalizada para la validación. Ver la wiki para un ejemplo.
— Markus Jarderot
19

Como se menciona en la documentación de addMethod :

Tenga en cuenta: Si bien la tentación es excelente para agregar un método regex que verifica su parámetro contra el valor, es mucho más limpio encapsular esas expresiones regulares dentro de su propio método. Si necesita muchas expresiones ligeramente diferentes, intente extraer un parámetro común. Una biblioteca de expresiones regulares: http://regexlib.com/DisplayPatterns.aspx

Entonces sí, debe agregar un método para cada expresión regular. La sobrecarga es mínima, mientras que le permite asignarle un nombre a la expresión regular (no debe subestimarse), un mensaje predeterminado (útil) y la capacidad de reutilizarla en varios lugares, sin duplicar la expresión regular una y otra vez.

— Jörn Zaefferer
fuente
¡Su respuesta es muy apreciada! Gracias. Lo pensaré de nuevo. En nuestro caso, la validación Regex parecía ser la mejor opción. Sin embargo entiendo su sentido en el uso validaciones "con nombre" ...
— PeterFromCologne
Quiero validación de expresión regular en forma agregada de JQgrid. Cómo puedo hacer eso ?
— Bhavik Ambani
14

Lo tengo para trabajar así:

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

Asegúrese de que la expresión regular esté entre /:-)

— Kris Nobels
fuente
Quiero validación de expresión regular en forma agregada de JQgrid. Cómo puedo hacer eso ?
— Bhavik Ambani
12

Puede usar patterndefinido en el additional-methods.jsarchivo. Tenga en cuenta que este archivo Additional-Methods.js debe incluirse después de la dependencia de jQuery Validate, luego puede 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 fragmento

— Wiktor Stribiżew
fuente
5

Este es el código de trabajo.

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

utilizamos principalmente la notación de marcado del complemento de validación jquery y las muestras publicadas no funcionaron para nosotros, cuando las banderas están presentes en la expresión regular, por ejemplo

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

por lo tanto usamos el siguiente fragmento

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

Por supuesto, ahora se podría combinar este código, con uno de los anteriores para permitir también pasar objetos RegExp al complemento, pero como no lo necesitábamos, dejamos este ejercicio para el lector ;-).

PD: también hay un complemento incluido para eso, https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js

— staabm
fuente
1

Esto funcionó para mí, siendo una de las reglas de validación:

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

Espero eso ayude

— Bogdan Mates
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.