250

jQuery検証プラグインを使用しています。素晴らしいもの！既存のASP.NETソリューションを移行して、ASP.NETバリデーターの代わりにjQueryを使用したいと思います。正規表現バリデーターの代わりがありません。私はこのようなことをしたいです：

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

これを実現するためにカスタムルールを追加するにはどうすればよいですか？

4

13 に答える 13

350

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}$" })

additional-methods.jsさらに、メソッド「パターン」を含むというファイルがあるようです。これは、RegExp引用符なしでメソッドを使用して作成された場合に発生する可能性があります。

編集

関数は、これpatternを行うための推奨される方法になりました。例を次に示します。

$("#Textbox").rules("add", { pattern: "^[a-zA-Z'.\\s]{1,40}$" })
于 2009-04-02T11:38:38.307 に答える
84

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/

于 2008-11-11T14:01:39.243 に答える
45

jQuery正規表現バリデーターを実行するためのすべての要素をまとめるのに問題がありましたが、動作するようになりました...これが完全な動作例です。これは、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>
于 2009-08-01T19:54:30.513 に答える
27

正規表現を文字列として定義する理由はありません。

$.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 },

こっちの方がいいですよね？

于 2010-01-11T07:00:14.507 に答える
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場合は、プロパティをリセットする必要があります。そうしないと、サブジェクト文字列が異なっていても、その正規表現との最後の一致の位置から検証が開始されます。gRegExp

私が持っていた他のいくつかのアイデアは、正規表現の配列と、正規表現の否定のための別のルールを使用できるようにすることでした:

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

しかし、それらを実装するのは多すぎるかもしれません。

于 2009-05-09T16:40:21.300 に答える
19

addMethod のドキュメントで述べたように:

注意: パラメータを値と照合する正規表現メソッドを追加したくなる誘惑にかられますが、これらの正規表現を独自のメソッド内にカプセル化する方がはるかにクリーンです。わずかに異なる式がたくさん必要な場合は、共通のパラメーターを抽出してみてください。正規表現のライブラリ: http://regexlib.com/DisplayPatterns.aspx

そうです、正規表現ごとにメソッドを追加する必要があります。オーバーヘッドは最小限ですが、正規表現に名前 (過小評価しないでください)、デフォルトのメッセージ (便利)、および正規表現自体を何度も複製することなく、さまざまな場所で再利用する機能を与えることができます。

于 2009-05-14T12:03:37.477 に答える
16

私はそれを次のように動作させました：

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

正規表現が間にあることを確認してください/:-)

于 2010-10-31T10:39:11.987 に答える
14

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>

于 2017-11-07T17:03:45.393 に答える
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 オブジェクトをプラグインに渡すこともできますが、それは必要ないので、この演習は読者に任せました ;-)。

PS: そのためのバンドルされたプラグインもあります。 https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js

于 2014-04-02T14:34:14.137 に答える