Xác thực jQuery: Làm thế nào để thêm quy tắc xác thực biểu thức chính quy?

240

Tôi đang sử dụng plugin xác thực jQuery . Công cụ tuyệt vời! Tôi muốn di chuyển giải pháp ASP.NET hiện tại của mình để sử dụng jQuery thay vì các trình xác nhận ASP.NET. Tôi đang thiếu một sự thay thế cho trình xác nhận biểu thức chính quy . Tôi muốn có thể làm một cái gì đó như thế này:

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

Làm cách nào để thêm quy tắc tùy chỉnh để đạt được điều này?

jquery regex jquery-validate

— PeterFromCologne
nguồn

1

Vui lòng nói rằng bạn đang kiểm tra phía máy chủ đầu vào và không chỉ dựa vào xác thực phía máy khách vì điều này rõ ràng có thể bị tắt.

— S Philp

tất nhiên! :-) Xác thực trên máy chủ là bắt buộc

— PeterFromCologne

121

OMG nó không có xác nhận regex?!

— Andrei Rînea

4

Ý tôi là, ai muốn regex để xác nhận bằng mọi cách ... ...;)

— jamiebarrow

329

Nhờ câu trả lời của redsapes tôi đã thêm một phương thức như thế này:

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

bây giờ tất cả những gì bạn cần làm để xác nhận đối với bất kỳ biểu thức chính nào là:

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

Ngoài ra, có vẻ như có một tệp có tên là Phương thức bổ sung có chứa phương thức "mẫu", có thể là RegExp khi được tạo bằng phương thức không có dấu ngoặc kép.

Biên tập

Các patternchức năng hiện nay là cách ưa thích để làm điều này, làm ví dụ:

 $("#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/additable-methods.js

— PeterFromCologne
nguồn

4

$ ("Hộp văn bản") phải là $ ("# Hộp văn bản").

— Ryan Shripat

3

Tôi sẽ để RegExp được định nghĩa bên ngoài phương thức dưới dạng chữ, thay vì lời gọi từ một chuỗi ..

— Tracker1

3

Điều này là siêu hữu ích và nên được đưa vào jquery :(

— Grahame A

3

Hoặc thêm nó vào trình xác nhận như thế này: ... quy tắc: {textbox_input_name_attr: {required: true, regex: "^ [a-zA-Z '. \\ s] {1,50} $"}}, ... .

— Hans Kerkhof

2

Bạn nhập một thông điệp tùy chỉnh như thế này: $ ('# phần tử'). Quy tắc ('thêm', {regex: / [abc] /, tin nhắn {regex: "tin nhắn tùy chỉnh '}});

— naspinski

80

Bạn có thể sử dụng addMethod ()

ví dụ

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

bài viết hay tại đây https://web.archive.org/web/20130609222116/http://www.randallmorey.com/blog/2008/mar/16/extending-jquery-form-validation-plugin/

— hình vuông màu đỏ
nguồn

6

Đừng thực sự trả lời câu hỏi. Điều gì nếu bạn muốn một quy tắc regex chung? Với câu trả lời này, bạn sẽ phải thêmMethod cho mỗi regex khác nhau.

— Andreas

43

Tôi đã gặp một số khó khăn khi kết hợp tất cả các phần để thực hiện trình xác thực biểu thức chính quy jQuery, nhưng tôi đã làm cho nó hoạt động ... Đây là một ví dụ hoạt động hoàn chỉnh. Nó sử dụng plugin 'Xác thực' có thể tìm thấy trong Plugin Xác thực 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
nguồn

25

Không có lý do để xác định regex là một chuỗi.

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

và

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

Cách này tốt hơn, không?

— Sam
nguồn

js nào là cần thiết cho việc này?

— Bhasta Ambani

Trên thực tế, chỉ tìm thấy một vấn đề với điều này. Nếu bạn sử dụng cờ g, bạn sẽ nhận được kết quả không nhất quán. Cờ g tạo chỉ mục riêng của nó rõ ràng (xem: stackoverflow.com/questions/209732/, ). Vì vậy, bạn cần xác định lại regex IN hàm để nó được tạo lại mỗi lần nó được gọi.

— rob_james

1

Để thêm vào đó: vẫn xác định nó là regex, như trên (hoặc bạn sẽ gặp vấn đề với chuỗi> chuyển đổi regex bằng cờ) NHƯNG ngoài ra nó vẫn cần var re = new RegExp(regexp);trong hàm

— rob_james

24

Mở rộng câu trả lời của PeterTheNiceGuy một chút:

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

Điều này sẽ cho phép bạn chuyển một đối tượng regex cho quy tắc.

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

Đặt lại thuộc lastIndextính là cần thiết khi g-flag được đặt trên RegExpđối tượng. Nếu không, nó sẽ bắt đầu xác nhận từ vị trí của trận đấu cuối cùng với biểu thức chính quy đó, ngay cả khi chuỗi chủ đề khác nhau.

Một số ý tưởng khác mà tôi có là cho phép bạn sử dụng các mảng của regex và một quy tắc khác để phủ định regex:

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

Nhưng thực hiện những điều đó có thể là quá nhiều.

— Markus Jarderot
nguồn

Tôi muốn xác thực biểu thức chính quy dưới dạng thêm JQgrid. Làm thế nào tôi có thể làm điều đó ?

— Bhasta Ambani

@BhastaAmbani Bạn có thể sử dụng chức năng tùy chỉnh để xác thực. Xem wiki cho một ví dụ.

— Markus Jarderot

19

Như đã đề cập trong tài liệu addMethod :

Xin lưu ý: Mặc dù sự cám dỗ là tuyệt vời khi thêm một phương thức regex kiểm tra tham số của nó so với giá trị, nhưng sẽ gọn gàng hơn nhiều khi đóng gói các biểu thức chính quy đó trong phương thức riêng của chúng. Nếu bạn cần nhiều biểu thức hơi khác nhau, hãy thử trích xuất một tham số chung. Một thư viện các biểu thức chính quy: http://regexlib.com/DisplayPotypes.aspx

Vì vậy, có, bạn phải thêm một phương thức cho mỗi biểu thức chính quy. Chi phí tối thiểu, trong khi nó cho phép bạn đặt tên cho regex (không được đánh giá thấp), một thông báo mặc định (tiện dụng) và khả năng sử dụng lại nó ở nhiều nơi khác nhau, mà không lặp lại nhiều lần regex.

— Jorn Zaefferer
nguồn

Câu trả lời của bạn được đánh giá cao! Cảm ơn. Tôi sẽ nghĩ về nó một lần nữa. Trong trường hợp của chúng tôi, xác nhận Regex dường như là phù hợp nhất. Tuy nhiên tôi hiểu quan điểm của bạn trong việc sử dụng xác nhận "có tên" ...

— PeterFromCologne

Tôi muốn xác thực biểu thức chính quy dưới dạng thêm JQgrid. Làm thế nào tôi có thể làm điều đó ?

— Bhasta Ambani

14

Tôi đã làm cho nó hoạt động như thế này:

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

Đảm bảo rằng biểu thức chính giữa /:-)

— Quý tộc Kris
nguồn

Tôi muốn xác thực biểu thức chính quy dưới dạng thêm JQgrid. Làm thế nào tôi có thể làm điều đó ?

— Bhasta Ambani

12

Bạn có thể sử dụng patternđược xác định trong additional-methods.jstập tin. Lưu ý rằng tệp phương thức bổ sung này phải được bao gồm sau khi phụ thuộc Xác thực jQuery, sau đó bạn chỉ có thể sử dụng

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

Mở rộng đoạn trích

— Wiktor Stribiżew
nguồn

5

Đây là mã làm việc.

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
nguồn

3

chúng tôi chủ yếu sử dụng ký hiệu đánh dấu của plugin xác thực jquery và các mẫu được đăng không hoạt động với chúng tôi, khi các cờ có mặt trong regex, ví dụ:

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

do đó chúng tôi sử dụng đoạn mã sau

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

Tất nhiên bây giờ người ta có thể kết hợp mã này, với một trong những điều trên để cho phép chuyển các đối tượng RegExp vào plugin, nhưng vì chúng tôi không cần nó nên chúng tôi đã để lại bài tập này cho người đọc ;-).

PS: cũng có plugin đi kèm cho điều đó, https://github.com/jzaefferer/jquery-validation/blob/master/src/additable/potype.js

— staabm
nguồn

1

Điều này làm việc cho tôi, là một trong những quy tắc xác nhận:

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

Hy vọng nó giúp

— Bạn tình
nguồn