Перевірка jQuery: Як додати правило для перевірки регулярних виразів?

240

Я використовую плагін перевірки jQuery . Чудові речі! Я хочу перенести своє існуюче рішення ASP.NET для використання jQuery замість валідаторів ASP.NET. Мені не вистачає заміни для валідатора регулярних виразів . Я хочу вміти робити щось подібне:

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

Як додати спеціальне правило, щоб досягти цього?

jquery  regex  jquery-validate 
— PeterFromCologne
джерело
1
Скажіть, ви перевіряєте сторону сервера введення та не просто покладаєтесь на перевірку на стороні клієнта, оскільки це, очевидно, може бути вимкнено.
— S Philp
звичайно! :-) Перевірка на сервері є обов'язковою
— PeterFromCologne
121
OMG це НЕ має перевірку регулярного виразу ?!
— Андрій Ронеа
4
Я маю на увазі, хто хотів би регекс для перевірки в будь-якому випадку ... ...;)
— jamiebarrow

Відповіді:

329

Завдяки відповіді redsquare я додав такий метод:

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

тепер все, що вам потрібно зробити, щоб перевірити будь-який регулярний вираз, це:

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

Крім того, схоже, є файл під назвою Additional-method.js, який містить метод "pattern", який може бути RegExp, коли створено за допомогою методу без лапок.

Редагувати

Тепер patternфункція є кращим способом зробити це, зробивши приклад:

 $("#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
джерело
4
$ ("Textbox") має бути $ ("# Textbox").
— Райан Шріпат
3
Я б дозволив RegExp визначатись поза методом як буквальний, а не виклик з рядка ..
— Tracker1
3
це дуже корисно і його слід включити до jquery :(
— Grahame A
3
Або додайте його до валідатора так: ... правила: {textbox_input_name_attr: {обов'язково: вірно, регулярний вираз: "^ [a-zA-Z '. \\ s] {1,50} $"}}, ... .
— Ганс Керкхоф
2
Ви вводите користувацьке повідомлення таким чином: $ ('# елемент'). Правила ('додати', {regex: / [abc] /, повідомлення {regex: "користувацьке повідомлення '}});
— naspinski
80

Ви можете використовувати addMethod ()

напр 

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

хороша стаття тут https://web.archive.org/web/20130609222116/http://www.randallmorey.com/blog/2008/mar/16/extending-jquery-form-validation-plugin/

— червоний квадрат
джерело
6
Не відповідайте на це питання. Що робити, якщо ви хочете загальне правило регулярного вираження? За допомогою цієї відповіді вам доведеться додатиМетод для кожного різного регулярного виразу.
— AndreasN
43

У мене виникли проблеми зі складанням усіх фрагментів для виконання валідатора регулярних виразів jQuery, але я змусив його працювати ... Ось повний робочий приклад. Він використовує плагін "Validation", який можна знайти у плагіні jQuery 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>
— бшак
джерело
25

Немає підстав визначати регулярний вираз як рядок.

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

і

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

це краще таким чином, ні?

— Сем
джерело
який js потрібен для цього?
— Бхавік Амбані
Власне, якраз знайшов проблему з цим. Якщо ви будете використовувати прапор g, ви отримаєте непослідовні результати. Прапор g очевидно створює власний індекс (див.: Stackoverflow.com/questions/209732/… ). Отже, вам потрібно переосмислити функцію регулярного вираження IN, щоб вона відтворювалася щоразу, коли вона викликається.
— rob_james
1
Додайте до цього: все-таки визначте це як регулярний вираз, як зазначено вище (або у вас виникнуть проблеми з рядком> перетворення регулярного виразу з прапорами), але крім цього він ще потребує var re = new RegExp(regexp);функції
— rob_james
24

Подовжуючи відповідь 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."
);

Це дозволить вам передати об'єкт регулярного вираження.

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

Скидання lastIndexвластивості необхідно, коли на gоб'єкті встановлено -flag RegExp. В іншому випадку він почне перевірку з позиції останнього збігу з цим регулярним виразом, навіть якщо тема теми є іншою.

Деякі інші ідеї у мене полягали в тому, щоб дозволити вам використовувати масиви регулярних виразів, а ще одне правило для заперечення регексу:

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

Але їх реалізація, можливо, буде занадто багато.

— Маркус Джардеро
джерело
Я хочу регулярне підтвердження виразів у формі add JQgrid. Як я можу це зробити?
— Бхавік Амбані
@BhavikAmbani Ви можете використовувати спеціальну функцію для перевірки. Для прикладу див . Вікі .
— Маркус Джардеро
19

Як зазначено в документації на addMethod :

Зверніть увагу: Хоча спокуса додати метод регулярного вираження, який перевіряє його параметр на значення, набагато чистіше інкапсулювати ці регулярні вирази всередині власного методу. Якщо вам потрібно багато трохи різних виразів, спробуйте витягти загальний параметр. Бібліотека регулярних виразів: http://regexlib.com/DisplayPatterns.aspx

Так що так, ви повинні додати метод для кожного регулярного виразу. Накладні витрати мінімальні, хоча це дозволяє надати регексу ім’я (не занижувати), повідомлення за замовчуванням (зручно) та можливість повторно використовувати його в різних місцях, не дублюючи сам регекс знову і знову.

— Йорн Зеффер
джерело
Ваша відповідь дуже оцінена! Дякую. Я подумаю про це ще раз. У нашому випадку перевірка Regex виявилася найкраще. Однак я розумію вашу думку щодо використання "названих" перевірок ...
— PeterFromCologne
Я хочу регулярне підтвердження виразів у формі add JQgrid. Як я можу це зробити?
— Бхавік Амбані
14

У мене це працює так:

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

Переконайтесь, що регулярний вираз знаходиться між /:-)

— Кріс Нобельс
джерело
Я хочу регулярне підтвердження виразів у формі add JQgrid. Як я можу це зробити?
— Бхавік Амбані
12

Ви можете використовувати patternвизначені у additional-methods.jsфайлі. Зауважте, що цей файл додаткових-method.js повинен бути включений після залежності jQuery Validate, тоді ви можете просто використовувати

$("#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>
Розгорніть фрагмент

— Wiktor Stribiżew
джерело
5

Це робочий код.

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
джерело
3

ми в основному використовуємо позначення розмітки плагіну перевірки jquery, і розміщені зразки не спрацювали для нас, коли прапори присутні у регулярній виразці, наприклад

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

тому ми використовуємо наступний фрагмент

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

Звичайно, тепер можна поєднати цей код, з одним із перерахованих вище, щоб дозволити передачу об'єктів RegExp у плагін, але оскільки він нам не потрібен, ми залишили цю вправу для читача ;-).

PS: для цього також є плагін, https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js

— staabm
джерело
1

Це працювало для мене, будучи одним із правил перевірки:

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

Сподіваюся, це допомагає

— Богдан Матес
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.