Sprawdzanie poprawności jQuery: jak dodać regułę do sprawdzania poprawności wyrażeń regularnych?

240

Korzystam z wtyczki sprawdzania poprawności jQuery . Świetne rzeczy! Chcę przeprowadzić migrację mojego istniejącego rozwiązania ASP.NET, aby używać jQuery zamiast walidatorów ASP.NET. Brakuje mi zamiennika walidatora wyrażeń regularnych . Chcę być w stanie zrobić coś takiego:

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

Jak dodać niestandardową regułę, aby to osiągnąć?

jquery  regex  jquery-validate 
— PeterFromCologne
źródło
1
Powiedz, że sprawdzasz stronę wejściową serwera, a nie polegasz tylko na sprawdzaniu poprawności po stronie klienta, ponieważ można to oczywiście wyłączyć.
— S Philp
oczywiście! :-) Walidacja na serwerze jest koniecznością
— PeterFromCologne
121
OMG to NIE ma sprawdzania poprawności wyrażenia regularnego ?!
— Andrei Rînea,
4
To znaczy, kto i tak chciałby regex dla walidacji ... ...;)
— jamiebarrow

Odpowiedzi:

329

Dzięki odpowiedzi redsquare dodałem następującą metodę:

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

teraz wszystko, co musisz zrobić, aby sprawdzić poprawność względem dowolnego wyrażenia regularnego, to:

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

Dodatkowo wygląda na to, że istnieje plik o nazwie dodatkowe-metody.

Edytować

patternFunkcja jest obecnie najlepszym sposobem, aby to zrobić, dzięki czemu na przykład:

 $("#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
źródło
4
$ („Pole tekstowe”) powinno wynosić $ („# Pole tekstowe”).
— Ryan Shripat
3
Pozwoliłbym, aby RegExp był zdefiniowany poza metodą jako dosłowny, zamiast wywoływania z ciągu ..
— Tracker1
3
jest to bardzo przydatne i powinno zostać uwzględnione w jquery :(
— Grahame A,
3
Lub dodaj go do walidatora w następujący sposób: ... rules: {textbox_input_name_attr: {wymagany: true, regex: "^ [a-zA-Z '. \\ s] {1,50} $"}}, ... .
— Hans Kerkhof
2
Wprowadzasz niestandardową wiadomość w następujący sposób: $ ('# element'). Rules ('add', {regex: / [abc] /, messages {regex: "custom message '}});
— naspinski
80

Możesz użyć metody addMethod ()

na przykład 

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

dobry artykuł tutaj https://web.archive.org/web/20130609222116/http://www.randallmorey.com/blog/2008/mar/16/extending-jquery-form-validation-plugin/

— plac Czerwony
źródło
6
Naprawdę nie odpowiadaj na pytanie. Co jeśli chcesz ogólną regułę wyrażeń regularnych? Z tą odpowiedzią będziesz musiał dodać Metodę dla każdego innego wyrażenia regularnego.
— AndreasN
43

Miałem trochę problemów ze zebraniem wszystkich elementów do wykonania walidatora wyrażeń regularnych jQuery, ale udało mi się go uruchomić ... Oto kompletny działający przykład. Wykorzystuje wtyczkę „Validation”, którą można znaleźć w 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
źródło
25

Nie ma powodu, aby definiować wyrażenie regularne jako ciąg.

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

i

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

tak jest lepiej, nie?

— Sam
źródło
który js jest do tego wymagany?
— Bhavik Ambani
Właśnie znalazłem problem z tym. Jeśli użyjesz flagi g, otrzymasz niespójne wyniki. Flaga g tworzy najwyraźniej własny indeks (patrz: stackoverflow.com/questions/209732/... ). Musisz więc ponownie zdefiniować wyrażenie regularne IN funkcji, aby była ona odtwarzana przy każdym wywołaniu.
— rob_james
1
Aby dodać do tego: nadal definiuj go jako wyrażenie regularne, jak wyżej (lub będziesz mieć problemy z konwersją ciągu> regex z flagami), ALE dodatkowo nadal potrzebuje var re = new RegExp(regexp);funkcji
— rob_james
24

Rozszerzając nieco odpowiedź 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."
);

To pozwoli ci przekazać obiekt wyrażenia regularnego do reguły.

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

Resetowanie lastIndexwłaściwości jest konieczne, gdy gna RegExpobiekcie ustawiono opcję -flag . W przeciwnym razie zacznie się sprawdzanie poprawności od pozycji ostatniego dopasowania z tym wyrażeniem regularnym, nawet jeśli łańcuch tematu jest inny.

Kilka innych pomysłów, które miałem, to umożliwienie ci korzystania z tablic wyrażeń regularnych i kolejna reguła negacji wyrażeń regularnych:

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

Ale ich wdrożenie może być za dużo.

— Markus Jarderot
źródło
Chcę sprawdzania poprawności wyrażeń regularnych w formie dodawania JQgrid. Jak mogę to zrobić ?
— Bhavik Ambani
@BhavikAmbani Do weryfikacji można użyć funkcji niestandardowej. Zobacz wiki na przykład.
— Markus Jarderot
19

Jak wspomniano w dokumentacji addMethod :

Uwaga: Chociaż pokusa jest świetna, aby dodać metodę wyrażenia regularnego, która sprawdza parametr pod względem wartości, o wiele czystsze jest kapsułkowanie tych wyrażeń regularnych w ich własnej metodzie. Jeśli potrzebujesz wielu nieco innych wyrażeń, spróbuj wyodrębnić wspólny parametr. Biblioteka wyrażeń regularnych: http://regexlib.com/DisplayPatterns.aspx

Tak, musisz dodać metodę dla każdego wyrażenia regularnego. Narzut jest minimalny, a jednocześnie pozwala nadać wyrażeniu regularnemu nazwę (nie można go lekceważyć), domyślną wiadomość (przydatna) i możliwość ponownego użycia go w różnych miejscach, bez powtarzania samego wyrażenia regularnego.

— Jörn Zaefferer
źródło
Twoja odpowiedź jest bardzo ceniona! Dzięki. Pomyślę o tym jeszcze raz. W naszym przypadku walidacja Regex wydawała się najlepiej dopasowana. Rozumiem jednak twój sens używania walidacji „nazwanych” ...
— PeterFromCologne
Chcę sprawdzania poprawności wyrażeń regularnych w formie dodawania JQgrid. Jak mogę to zrobić ?
— Bhavik Ambani
14

Mam to do pracy w następujący sposób:

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

Upewnij się, że regex jest między /:-)

— Kris Nobels
źródło
Chcę sprawdzania poprawności wyrażeń regularnych w formie dodawania JQgrid. Jak mogę to zrobić ?
— Bhavik Ambani
12

Możesz użyć patternzdefiniowanego w additional-methods.jspliku. Zauważ, że ten plik dodatkowy-methods.js musi zostać dołączony po jQuery Sprawdź poprawność zależności, możesz po prostu użyć

$("#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>
Rozwiń fragment kodu

— Wiktor Stribiżew
źródło
5

To jest działający kod.

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
źródło
3

używamy głównie notacji znaczników wtyczki sprawdzania poprawności jquery, a wysłane próbki nie działały dla nas, gdy flagi są w wyrażeniu regularnym, np.

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

dlatego używamy następującego fragmentu kodu

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

Oczywiście teraz można połączyć ten kod z jednym z powyższych, aby umożliwić także przekazywanie obiektów RegExp do wtyczki, ale ponieważ nie potrzebowaliśmy go, pozostawiliśmy to ćwiczenie czytelnikowi ;-).

PS: jest do tego dołączona wtyczka, https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js

— staabm
źródło
1

To działało dla mnie, będąc jedną z reguł sprawdzania poprawności:

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

Mam nadzieję, że to pomoże

— Bogdan Mates
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.