ตรวจสอบ 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 มันไม่ได้มีการตรวจสอบ regex?!
— Andrei Rînea
4
ฉันหมายความว่าใครต้องการให้ regex ตรวจสอบความถูกต้องอยู่แล้ว ... ... ;)
— 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."
);

ตอนนี้สิ่งที่คุณต้องทำเพื่อตรวจสอบกับ regex ใด ๆ คือ:

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

นอกจากนี้ดูเหมือนว่าจะมีไฟล์ชื่อเพิ่มเติม-methods.js ที่มีวิธีการ "รูปแบบ" ซึ่งสามารถเป็น 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")
— Ryan Shripat
3
ฉันจะต้องให้นิพจน์ทั่วไปจะกำหนดวิธีการนอกเป็นตัวอักษรแทนการขอร้องจากสตริง ..
— Tracker1
3
สิ่งนี้มีประโยชน์มากและควรรวมอยู่ใน jquery :(
— Grahame A
3
หรือเพิ่มลงในเครื่องมือตรวจสอบความถูกต้องดังนี้: ... กฎ: {textbox_input_name_attr: {ต้องการ: จริง, regex: "^ [a-zA-Z '. \\ s] {1,50} $"}}, ... .
— Hans Kerkhof
2
คุณป้อนข้อความที่กำหนดเองเช่นนี้: $ ('# element') กฎ ('เพิ่ม', {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/

— redsquare
แหล่งที่มา
6
อย่าตอบคำถามจริงๆ ถ้าคุณต้องการกฎ regex ทั่วไป ด้วยคำตอบนี้คุณจะต้องเพิ่มวิธีสำหรับ regex แต่ละอัน
— AndreasN
43

ฉันมีปัญหาในการรวบรวมชิ้นส่วนทั้งหมดสำหรับการทำ jQuery expression validator แต่ฉันได้มันมาทำงาน ... นี่เป็นตัวอย่างการทำงานที่สมบูรณ์ มันใช้ปลั๊กอิน 'การตรวจสอบ' ซึ่งสามารถพบได้ในปลั๊กอินการตรวจสอบ 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
แหล่งที่มา
25

ไม่มีเหตุผลในการกำหนด regex เป็นสตริง

$.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 ใดสำหรับสิ่งนี้
— Bhavik Ambani
ที่จริงแล้วเพิ่งพบปัญหากับสิ่งนี้ หากคุณใช้การตั้งค่าสถานะ g คุณจะได้รับผลลัพธ์ที่ไม่สอดคล้องกัน ธง g สร้างดัชนีของตัวเองอย่างชัดเจน (ดู: stackoverflow.com/questions/209732/… ) ดังนั้นคุณต้องกำหนด regex ใหม่ในฟังก์ชั่นใหม่ดังนั้นจึงสร้างใหม่ทุกครั้งที่มีการเรียกใช้
— rob_james
1
เพื่อเพิ่มที่: ยังคงกำหนดเป็น regex ดังกล่าวข้างต้น (หรือคุณจะมีปัญหากับสตริง> การแปลง regex ด้วยธง) แต่นอกจากนี้ยังต้องการ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."
);

นี้จะช่วยให้คุณสามารถส่งวัตถุ regex ไปยังกฎ

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

การรีเซ็ตlastIndexคุณสมบัติเป็นสิ่งจำเป็นเมื่อgตั้งค่าแฟล็กบนRegExpวัตถุ มิฉะนั้นจะเริ่มตรวจสอบความถูกต้องจากตำแหน่งของการจับคู่ครั้งล่าสุดกับ regex นั้นแม้ว่าสตริงหัวเรื่องจะแตกต่างกัน

ความคิดอื่น ๆ ที่ฉันมีคือให้คุณใช้อาร์เรย์ของ regex และกฎอื่นสำหรับการปฏิเสธของ regex:

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

แต่การใช้สิ่งเหล่านั้นอาจจะมากเกินไป

— Markus Jarderot
แหล่งที่มา
ฉันต้องการการตรวจสอบการแสดงออกปกติในรูปแบบเพิ่มของ JQgrid ฉันจะทำสิ่งนั้นได้อย่างไร
— Bhavik Ambani
@BhavikAmbani คุณสามารถใช้ฟังก์ชั่นที่กำหนดเองสำหรับการตรวจสอบ ดูวิกิสำหรับตัวอย่าง
— Markus Jarderot
19

ตามที่กล่าวไว้ในเอกสารประกอบ addMethod :

โปรดทราบ: ในขณะที่การล่อลวงเป็นวิธีที่ยอดเยี่ยมในการเพิ่มวิธีการ regex ที่ตรวจสอบพารามิเตอร์ของมันเทียบกับค่า แต่ก็มีความสะอาดกว่ามากในการสรุปแค็ปซูลปกติเหล่านั้นด้วยวิธีการของตนเอง หากคุณต้องการนิพจน์ที่แตกต่างกันเล็กน้อยให้ลองแยกพารามิเตอร์ทั่วไป ไลบรารีของนิพจน์ทั่วไป: http://regexlib.com/DisplayPatterns.aspx

ใช่คุณต้องเพิ่มวิธีการสำหรับการแสดงออกปกติแต่ละครั้ง ค่าใช้จ่ายน้อยที่สุดในขณะที่ช่วยให้คุณสามารถตั้งชื่อ Regex (เพื่อไม่ให้ต่ำไป) ข้อความเริ่มต้น (สะดวก) และความสามารถในการใช้ซ้ำในที่ต่างๆโดยไม่ต้องทำซ้ำ Regex ซ้ำไปซ้ำมา

— Jörn Zaefferer
แหล่งที่มา
คำตอบของคุณเป็นที่ยอมรับมาก! ขอบคุณ ฉันจะคิดอีกครั้ง ในกรณีของเราการตรวจสอบ Regex ดูเหมือนจะเหมาะสมที่สุด แต่ผมเข้าใจจุดของคุณในการใช้ "ชื่อ" การตรวจสอบ ...
— PeterFromCologne
ฉันต้องการการตรวจสอบการแสดงออกปกติในรูปแบบเพิ่มของ JQgrid ฉันจะทำสิ่งนั้นได้อย่างไร
— Bhavik Ambani
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'
            }
        }
    });
});

ตรวจสอบให้แน่ใจว่า regex อยู่ระหว่าง/:-)

— คริสโนเบล
แหล่งที่มา
ฉันต้องการการตรวจสอบการแสดงออกปกติในรูปแบบเพิ่มของ JQgrid ฉันจะทำสิ่งนั้นได้อย่างไร
— Bhavik Ambani
12

คุณอาจใช้patternกำหนดไว้ในadditional-methods.jsไฟล์ โปรดทราบว่าไฟล์เพิ่มเติม methods-js นี้จะต้องรวมหลังจาก jQuery ตรวจสอบการพึ่งพาแล้วคุณก็สามารถใช้

$("#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;
        }
    });
}
— อรุณธวัช IIITH
แหล่งที่มา
3

เราส่วนใหญ่ใช้สัญกรณ์มาร์กอัปของปลั๊กอินการตรวจสอบ jquery และตัวอย่างที่โพสต์แล้วไม่ได้ผลสำหรับเราเมื่อมีธงอยู่ใน regex เช่น

<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})?$/
            }

หวังว่ามันจะช่วย

— เพื่อน Bogdan
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.