jQuery validate: Normal ifade doğrulaması için kural nasıl eklenir?

240

Ben kullanıyorum jQuery doğrulama eklentisi . Harika şeyler! ASP.NET doğrulayıcıları yerine jQuery kullanmak için varolan ASP.NET çözümümü taşımak istiyorum. Normal ifade doğrulayıcı için bir yedek eksik . Böyle bir şey yapabilmek istiyorum:

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

Bunu başarmak için nasıl özel kural eklerim ?

jquery  regex  jquery-validate 
— PeterFromCologne
kaynak
1
Lütfen giriş sunucusu tarafını kontrol ettiğinizi ve yalnızca istemci tarafı doğrulamasına dayanmadığınızı, bunun açıkça kapatılabileceğini söyleyin.
— S Philp
elbette! :-) Sunucuda doğrulama
— şarttır
121
Aman tanrım regex doğrulaması yok mu ?!
— Andrei Rînea
4
Demek istediğim, kim zaten doğrulama için regex
— istesin

Yanıtlar:

329

Redsquare'in cevabı sayesinde şöyle bir yöntem ekledim:

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

Şimdi herhangi bir normal ifade karşı doğrulamak için yapmanız gereken tek şey bu:

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

Ayrıca, tırnak işaretleri olmadan yöntem kullanılarak oluşturulduğunda RegExp olabilen "pattern" yöntemini içeren extra-method.js adlı bir dosya var gibi görünüyor.

Düzenle

patternİşlevi artık örnek gösteriyor ve bunu yapmak tercih yoludur:

 $("#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
kaynak
4
$ ("Textbox") $ ("# Textbox") olmalıdır.
— Ryan Shripat
3
RegExp bir dize çağırma yerine, bir değişmez olarak yöntem dışında tanımlanmasına izin olurdu ..
— Tracker1
3
Bu süper kullanışlı ve
— jquery'ye
3
Veya şu şekilde doğrulayıcıya ekleyin: ... rules: {textbox_input_name_attr: {zorunlu: true, normal ifade: "^ [a-zA-Z '. \\ s] {1,50} $"}}, ... .
— Hans Kerkhof
2
Bunun gibi özel bir mesaj girersiniz: $ ('# element'). Kurallar ('add', {regex: / [abc] /, messages {regex: "custom message '}});
— naspinski
80

AddMethod () yöntemini kullanabilirsiniz

Örneğin 

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

iyi makale burada https://web.archive.org/web/20130609222116/http://www.randallmorey.com/blog/2008/mar/16/extending-jquery-form-validation-plugin/

— kırmızı kare
kaynak
6
Soruyu gerçekten cevaplama. Genel bir normal ifade kuralı istiyorsanız ne olur? Bu cevapla, her farklı regex için Metod eklemeniz gerekir.
— AndreasN
43

Bir jQuery düzenli ifade doğrulayıcı yapmak için tüm parçaları bir araya getirmekte biraz sorun yaşadım, ama işe aldım ... İşte tam bir çalışma örneği. JQuery Validation Plugin'de bulunan 'Validation' eklentisini kullanır

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

Normal ifadeyi dize olarak tanımlamak için bir neden yoktur.

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

ve

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

bu şekilde daha iyi, değil mi?

— Sam
kaynak
bunun için hangi js gereklidir?
— Bhavik Ambani
Aslında, bununla ilgili bir sorun buldum. G bayrağını kullanırsanız tutarsız sonuçlar elde edersiniz. G bayrağı görünüşte kendi dizinini oluşturur (bkz . Stackoverflow.com/questions/209732/… ). Bu nedenle, regex IN işlevini yeniden tanımlamanız gerekir, böylece her çağrıldığında yeniden oluşturulur.
— 14:48
1
Buna eklemek için: hala yukarıdaki gibi bir normal ifade olarak tanımlayın (ya da dize> bayraklarla normal regex dönüşümü ile ilgili sorunlarınız olacak) AMA buna ek olarak hala var re = new RegExp(regexp);işlevde olması gerekiyor
— rob_james
24

PeterTheNiceGuy'un cevabını biraz genişletmek:

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

Bu, regex nesnesini kurala geçirmenize izin verir.

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

Nesne üzerinde -flag ayarlandığında lastIndexözelliğin sıfırlanması gerekir . Aksi takdirde, konu dizesi farklı olsa bile, bu normal ifade ile son eşleşme konumundan doğrulamaya başlar.gRegExp

Sahip olduğum diğer bazı fikirler, normal ifadeler dizilerini ve normal ifadelerin olumsuzlanması için başka bir kural kullanmanızı sağlamaktı:

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

Ama bunları uygulamak belki çok fazla olabilir.

— Markus Jarderot
kaynak
JQgrid ekleme şeklinde düzenli ifade doğrulama istiyorum. Bunu nasıl yapabilirim ?
— Bhavik Ambani
@BhavikAmbani Doğrulama için özel bir işlev kullanabilirsiniz. Örnek için wiki'ye bakın .
— Markus Jarderot
19

AddMethod belgelerinde belirtildiği gibi :

Lütfen dikkat: Günaha parametresini değere göre kontrol eden bir normal ifade yöntemi eklemek harika olsa da, bu normal ifadeleri kendi yöntemleri içinde kapsüllemek çok daha temizdir. Çok sayıda farklı ifadeye ihtiyacınız varsa, ortak bir parametre çıkarmayı deneyin. Normal ifadelerden oluşan bir kütüphane: http://regexlib.com/DisplayPatterns.aspx

Yani evet, her normal ifade için bir yöntem eklemelisiniz. Regex'e bir defa (hafife alınmamak için) bir ad, varsayılan bir mesaj (kullanışlı) ve regex'in kendisini tekrar tekrar çoğaltmadan çeşitli yerlerde yeniden kullanma olanağı vermenize izin verir.

— Jörn Zaefferer
kaynak
Cevabınız çok takdir edildi! Teşekkürler. Tekrar düşüneceğim. Bizim durumumuzda Regex doğrulaması en uygun gibi görünüyordu. Ancak "adlandırılmış" doğrulamaları kullanma konusundaki amacınızı anlıyorum ...
— PeterFromCologne
JQgrid ekleme şeklinde düzenli ifade doğrulama istiyorum. Bunu nasıl yapabilirim ?
— Bhavik Ambani
14

Bu şekilde çalışmayı başardım:

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

Normal ifadenin /:-) arasında olduğundan emin olun

— Kris Nobels
kaynak
JQgrid ekleme şeklinde düzenli ifade doğrulama istiyorum. Bunu nasıl yapabilirim ?
— Bhavik Ambani
12

Dosyada patterntanımlı kullanabilirsiniz additional-methods.js. Bu ek-method.js dosyasının jQuery Doğrulama bağımlılığından sonra dahil edilmesi gerektiğini unutmayın, o zaman

$("#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>
Snippet'i genişlet

— Wiktor Stribiżew
kaynak
5

Bu çalışma kodu.

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

biz esas olarak jquery doğrulama eklentisinin biçimlendirme gösterimini kullanıyoruz ve regex'te bayraklar bulunduğunda yayınlanan örnekler bizim için çalışmadı, örn.

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

bu nedenle aşağıdaki snippet'i kullanıyoruz

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

Tabii ki şimdi bu kodu birleştirebilir, yukarıdakilerden biriyle RegExp nesnelerini eklentiye geçirmeye izin verebiliriz, ancak ihtiyacımız olmadığı için bu egzersizi okuyucu için bıraktık ;-).

Not: bunun için paketlenmiş eklenti de var, https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js

— staabm
kaynak
1

Doğrulama kurallarından biri olarak bu benim için çalıştı:

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

Umarım yardımcı olur

— Bogdan Mates
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.