Validasi jQuery: Bagaimana cara menambahkan aturan untuk validasi ekspresi reguler?

240

Saya menggunakan plugin validasi jQuery . Barang bagus! Saya ingin memigrasikan solusi ASP.NET saya yang ada untuk menggunakan jQuery alih-alih validator ASP.NET. Saya kehilangan pengganti untuk validator ekspresi reguler . Saya ingin dapat melakukan sesuatu seperti ini:

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

Bagaimana cara menambahkan aturan khusus untuk mencapai ini?

jquery  regex  jquery-validate 
— PeterFromCologne
sumber
1
Silakan katakan Anda sedang memeriksa sisi server input dan tidak hanya mengandalkan validasi sisi klien karena ini jelas dapat dimatikan.
— S Philp
tentu saja! :-) Validasi pada server adalah suatu keharusan
— PeterFromCologne
121
Ya Tuhan TIDAK MEMILIKI validasi regex ?!
— Andrei Rînea
4
Maksudku, siapa yang mau regex untuk validasi ... ...;)
— jamiebarrow

Jawaban:

329

Berkat jawaban redsquare saya menambahkan metode seperti ini:

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

sekarang yang perlu Anda lakukan untuk memvalidasi terhadap regex apa pun adalah ini:

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

Selain itu, sepertinya ada file yang disebut metode-tambahan.js yang berisi metode "pola", yang dapat berupa RegExp ketika dibuat menggunakan metode tanpa tanda kutip.

Edit

The patternFungsi sekarang cara yang lebih disukai untuk melakukan hal ini, membuat contoh:

 $("#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
sumber
4
$ ("Textbox") harus menjadi $ ("# Textbox").
— Ryan Shripat
3
Saya akan membiarkan RegExp didefinisikan di luar metode sebagai literal, bukan doa dari string ..
— Tracker1
3
ini sangat berguna dan harus dimasukkan dalam jquery :(
— Grahame A
3
Atau tambahkan ke validator seperti ini: ... aturan: {textbox_input_name_attr: {wajib: true, regex: "^ [a-zA-Z '. \\ s] {1,50} $"}}, ... .
— Hans Kerkhof
2
Anda memasukkan pesan khusus seperti ini: $ ('# element'). Rules ('add', {regex: / [abc] /, messages {regex: "custom message '}}))
— naspinski
80

Anda dapat menggunakan addMethod ()

misalnya 

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

artikel bagus di sini https://web.archive.org/web/20130609222116/http://www.randallmorey.com/blog/2008/mar/16/extending-jquery-form-validation-plugin/

— kotak merah
sumber
6
Jangan benar-benar menjawab pertanyaan itu. Bagaimana jika Anda menginginkan aturan regex umum? Dengan jawaban ini Anda harus menambahkan Metode untuk setiap regex yang berbeda.
— AndreasN
43

Saya mengalami beberapa masalah dalam mengumpulkan semua bagian untuk melakukan validator ekspresi reguler jQuery, tapi saya berhasil ... Ini adalah contoh kerja yang lengkap. Ini menggunakan plugin 'Validasi' yang dapat ditemukan di Plugin Validasi jQuery

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

Tidak ada alasan untuk mendefinisikan regex sebagai string.

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

dan

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

lebih baik begini, bukan?

— Sam
sumber
js mana yang diperlukan untuk ini?
— Bhavik Ambani
Sebenarnya, baru saja menemukan masalah dengan ini. Jika Anda menggunakan flag g, Anda akan mendapatkan hasil yang tidak konsisten. Bendera g membuat indeks sendiri rupanya (lihat: stackoverflow.com/questions/209732/… ). Jadi, Anda perlu mendefinisikan ulang regex DI fungsi sehingga itu diciptakan kembali setiap kali dipanggil.
— rob_james
1
Untuk menambahkan itu: masih mendefinisikannya sebagai regex, seperti di atas (atau Anda akan memiliki masalah dengan string> konversi regex dengan flag) TETAPI masih membutuhkan var re = new RegExp(regexp);fungsi
— rob_james
24

Memperluas jawaban PeterTheNiceGuy sedikit:

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

Ini akan memungkinkan Anda untuk melewatkan objek regex ke aturan.

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

Mengatur ulang lastIndexproperti diperlukan ketika g-flag diatur pada RegExpobjek. Kalau tidak, itu akan mulai memvalidasi dari posisi pertandingan terakhir dengan regex itu, bahkan jika string subjek berbeda.

Beberapa ide lain yang saya miliki adalah untuk memungkinkan Anda menggunakan array dari regex, dan aturan lain untuk negasi dari regex:

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

Tetapi menerapkan itu mungkin terlalu banyak.

— Markus Jarderot
sumber
Saya ingin validasi ekspresi reguler dalam bentuk JQgrid. Bagaimana saya bisa melakukan itu?
— Bhavik Ambani
@ BhavikAmbani Anda dapat menggunakan fungsi kustom untuk validasi. Lihat wiki sebagai contoh.
— Markus Jarderot
19

Seperti yang disebutkan pada dokumentasi addMethod :

Harap dicatat: Meskipun godaan sangat bagus untuk menambahkan metode regex yang memeriksa parameternya terhadap nilai, jauh lebih bersih untuk merangkum ekspresi reguler di dalam metode mereka sendiri. Jika Anda membutuhkan banyak ekspresi yang sedikit berbeda, cobalah untuk mengekstrak parameter umum. Perpustakaan ekspresi reguler: http://regexlib.com/DisplayPatterns.aspx

Jadi ya, Anda harus menambahkan metode untuk setiap ekspresi reguler. Overheadnya minimal, sementara itu memungkinkan Anda untuk memberi nama regex (tidak boleh diremehkan), pesan default (praktis) dan kemampuan untuk menggunakannya kembali di berbagai tempat, tanpa menduplikasi regex itu sendiri berulang-ulang.

— Jörn Zaefferer
sumber
Jawaban Anda sangat dihargai! Terima kasih. Saya akan memikirkannya lagi. Dalam kasus kami validasi Regex tampaknya paling cocok. Namun saya memahami titik Anda dalam menggunakan "bernama" validasi ...
— PeterFromCologne
Saya ingin validasi ekspresi reguler dalam bentuk JQgrid. Bagaimana saya bisa melakukan itu?
— Bhavik Ambani
14

Saya membuatnya bekerja seperti ini:

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

Pastikan regex berada di antara keduanya / :-)

— Kris Nobels
sumber
Saya ingin validasi ekspresi reguler dalam bentuk JQgrid. Bagaimana saya bisa melakukan itu?
— Bhavik Ambani
12

Anda dapat menggunakan yang patternditentukan dalam additional-methods.jsfile. Perhatikan bahwa file metode-tambahan.js ini harus disertakan setelah dependensi jQuery Validate, maka Anda dapat menggunakannya

$("#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>
Luaskan cuplikan

— Wiktor Stribiżew
sumber
5

Ini adalah kode yang berfungsi.

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

kami terutama menggunakan notasi markup dari plugin validasi jquery dan sampel yang diposting tidak bekerja untuk kami, ketika bendera hadir di regex, misalnya

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

oleh karena itu kami menggunakan cuplikan berikut

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

Tentu saja sekarang orang dapat menggabungkan kode ini, dengan salah satu di atas juga memungkinkan untuk melewatkan objek RegExp ke dalam plugin, tetapi karena kami tidak membutuhkannya, kami meninggalkan latihan ini untuk pembaca ;-).

PS: ada juga plugin yang dibundel untuk itu, https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js

— staabm
sumber
1

Ini berhasil bagi saya, menjadi salah satu aturan validasi:

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

Semoga ini bisa membantu

— Bogdan Mates
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.