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


Answers

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/

Question

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

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

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




Extendiendo la respuesta de PeterTheNiceGuy un poco:

$.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 propiedad lastIndex es necesario cuando g -flag se establece en el objeto RegExp . De lo contrario, comenzaría a validarse desde la posición de la última coincidencia con esa expresión regular, incluso si la cadena del sujeto es diferente.

Algunas otras ideas que tuve fueron para habilitar el uso de matrices de expresiones regulares, y otra regla para la negación de expresiones regulares:

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

Pero su implementación podría ser demasiado.




Como se menciona en la documentación de addMethod :

Tenga en cuenta: aunque la tentación es genial para agregar un método de expresión regular que verifique su parámetro con el valor, es mucho más claro 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í, debes agregar un método para cada expresión regular. La sobrecarga es mínima, mientras que le permite dar un nombre a la expresión regular (no debe subestimarse), un mensaje predeterminado (útil) y la capacidad de reutilizarlo en varios lugares, sin duplicar la expresión regular una y otra vez.




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




Esto es 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;
        }
    });
}





Links