jQuery validate : 정규식 유효성 검사 규칙을 추가하는 방법은 무엇입니까?

240

jQuery 유효성 검사 플러그인을 사용하고 있습니다 . 좋은 물건! 기존 ASP.NET 솔루션을 마이그레이션하여 ASP.NET 유효성 검사기 대신 jQuery를 사용하고 싶습니다. 정규식 유효성 검사기 의 대체품이 없습니다 . 다음과 같이 할 수 있기를 원합니다.

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

이를 위해 사용자 지정 규칙 을 추가하려면 어떻게합니까 ?

jquery  regex  jquery-validate 
— PeterFromCologne
소스
1
입력 서버 측을 확인하고 있으며 클라이언트 측 유효성 검사에만 의존하는 것이 아니라 해제 될 수 있으므로 확인하십시오.
— S Philp
물론이야! :-) 서버의 유효성 검사는 필수입니다
— PeterFromCologne 2016 년
121
OMG는 하지 않습니다 정규식 검증이?!
— Andrei Rînea 2009
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}$" })

또한 "pattern"메소드를 포함하는 additional-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
RegExp를 문자열 외부에서 호출하는 대신 메서드 외부에서 리터럴로 정의 할 수
— 있었습니다
3
이것은 매우 유용하며 jquery에 포함되어야합니다. (
— Grahame A
3
또는 다음과 같이 유효성 검사기에 추가하십시오. ... 규칙 : {textbox_input_name_attr : {필수 : true, 정규식 : "^ [a-zA-Z '. \\ s] {1,50} $"}}, ... .
— 한스 Kerkhof
2
. $ ( '# 요소') 규칙 ( '추가', {정규식 : / [ABC] / 메시지 {정규식 : "사용자 정의 메시지 '}})이 같은 사용자 정의 메시지를 입력합니다
— 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 정규 표현식 유효성 검사기를 수행하기 위해 모든 조각을 모으는 데 약간의 어려움이 있었지만 작동하도록했습니다 ... 여기에 완전한 작업 예가 있습니다. jQuery Validation Plugin 에서 찾을 수있는 '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>
— s
소스
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가 이것에 필요합니까?
— Bhavik Ambani
실제로, 이것에 관한 문제를 발견했습니다. 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}$/ });

-flag를 설정 한 lastIndex경우 속성을 재설정 해야 g합니다.RegExp객체 합니다. 그렇지 않으면 제목 문자열이 다르더라도 해당 정규 표현식과 마지막 일치하는 위치에서 유효성 검사를 시작합니다.

내가 가진 다른 아이디어는 당신이 정규 표현식 배열을 사용할 수 있도록하는 것이었고 정규 표현식을 부정하는 또 다른 규칙을 사용하는 것입니다.

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

그러나 구현하는 것이 너무 많을 수 있습니다.

— 마르쿠스 자데 로트
소스
JQgrid 추가 형식으로 정규식 유효성 검사를 원합니다. 어떻게해야합니까?
— Bhavik Ambani
@BhavikAmbani 검증을 위해 사용자 정의 기능을 사용할 수 있습니다. 예제 는 위키 를 참조하십시오 .
— Markus Jarderot
19

addMethod 문서 에서 언급했듯이 :

참고 : 매개 변수를 값과 비교하여 확인하는 정규식 메서드를 추가하려는 유혹이 있지만 정규 표현식을 자체 메서드 안에 캡슐화하는 것이 훨씬 깔끔합니다. 약간 다른 표현식이 많이 필요한 경우 공통 매개 변수를 추출하십시오. 정규식 라이브러리 : http://regexlib.com/DisplayPatterns.aspx

예, 각 정규식마다 메소드를 추가해야합니다. 오버 헤드는 최소화되지만 정규 표현식에 이름을 과소 평가하거나 과소 평가하지 않고 기본 메시지 (핸디) 및 다양한 장소를 재사용 할 수 있습니다.

— 요른 자퍼
소스
당신의 대답은 많이 평가됩니다! 감사. 다시 생각해 볼게요. 우리의 경우 정규식 유효성 검사가 가장 적합한 것으로 보입니다. 그러나 "명명 된"검증을 사용하는 데있어 귀하의 요점을 이해합니다 ...
— 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'
            }
        }
    });
});

정규식이 /:-) 사이에 있는지 확인하십시오.

— 크리스 노벨 스
소스
JQgrid 추가 형식으로 정규식 유효성 검사를 원합니다. 어떻게해야합니까?
— Bhavik Ambani
12

파일에 pattern정의 된 것을 사용할 수 있습니다 additional-methods.js. 이 additional-methods.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 객체를 플러그인으로 전달할 수도 있지만 필요하지 않기 때문에이 연습을 독자에게 맡겼습니다. ;-).

추신 : https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js 용 번들 플러그인도 있습니다.

— staabm
소스
1

이것은 유효성 검사 규칙 중 하나 인 나를 위해 일했습니다.

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

그것이 도움이되기를 바랍니다.

— 보그 단 메이트
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.