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

regexp javascript

Question

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?

Answer 1

Como se menciona en la documentación de addMethod :

Tenga en cuenta: si bien la tentación es excelente para agregar un método de expresiones regulares que verifique su parámetro con 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í, tienes que agregar un método para cada expresión regular. La sobrecarga es mínima, mientras que le permite asignar un nombre a la expresión regular (no se debe subestimar), un mensaje predeterminado (práctico) y la posibilidad de reutilizarlo en varios lugares, sin duplicar la expresión regular una y otra vez.

Answer 2

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, [email protected]''
            },

            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. [phone]"    
            },

        },

        submitHandler: function (form)
        {
            return true;
        }
    });
}

Answer 3

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

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

Espero eso ayude

Answer 4

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 de expresión regular a la regla.

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

Es necesario restablecer la propiedad lastIndex cuando g -flag se establece en el objeto RegExp . De lo contrario, comenzaría a validar 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 fueron para permitirte 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 implementar eso quizás sea demasiado.

Answer 5

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-methods.js que contiene el método "patrón", que puede ser un RegExp cuando se crea utilizando el método sin comillas.

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

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

Answer 6

Lo tengo para trabajar así:

$.validator.addMethod(
    "regex",
    function(value, element, regexp) {
        var check = false;
        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 / :-)

Answer 7

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?

Answer 8

Puede usar el pattern definido en el archivo additional-methods.js . Tenga en cuenta que este archivo adicional-methods.js debe incluirse después de la dependencia de Validación de jQuery, entonces solo 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>

Answer 9

Puedes usar el 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/

Answer 10

Tuve algunos problemas para armar todas las piezas para hacer un validador de expresiones regulares jQuery, pero lo conseguí para trabajar ... Aquí hay un ejemplo completo de trabajo. Utiliza el complemento ''Validación'' que se puede encontrar en el http://bassistance.de/jquery-plugins/jquery-plugin-validation/

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

Answer 11

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

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

Por eso utilizamos el siguiente fragmento de código.

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