0

こんにちは、私は本当にこれにこだわっています。

次の jQuery フォーム検証の書き方を知っている人はいますか? とても単純なことだと思いますが、命を救うためにこれを理解することはできません。

知識を共有していただきありがとうございます。

次のフォーム検証を WITH jquery に記述する必要があります。エラーが発生するたびに、フォームが送信されないようにします。jquery コードによって検証される 4 つの入力があります。また、自分の jQuery ファイルにリンクすることも許可されていません。よくわかりませんが、検証リンクからのこの jQuery が壊れていると思います。

検証ルールは次のとおりです。

  • 入力: ユーザー名; 必須 (はい); 検証 (5 ～ 10 文字の長さである必要があります)。
  • 入力: 電子メール; 必須 (はい); 検証 (@ 記号が必要で、ピリオドが必要です)。
  • 入力: 通りの名前; 必須 (いいえ); 検証 (数字で始める必要があります)。
  • INPUT: 生年月日; 必須 (はい); 検証 (数値である必要があります)。

私のコードは次のようになります。

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<!-- Hi JASON YOUR PLUGIN DDOE SNOT WORK!!! I used another plugin from the jquery site.
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
-->
<script type="text/javascript" src=""></script>


    <script type="text/javascript">

$(document).ready(function() {

    $("#form1").validate({

        rules: {
            name:  {
                required: true,
                minlength: 5
                maxlength: 10
            },
            address:  {
                number: true,
            },
            email: {// compound rule 
                required: true, 
                email: true 
            }
        },

        url: {
            url: true
        },

        messages: {
            name: {
                minlength: jQuery.format("At least {0} characters required.")
            }
        },

        highlight: function(element, errorClass, validClass) {

            $(element).addClass(errorClass).removeClass(validClass);
            $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);

            setTimeout(function() {

                $(element).removeClass(errorClass).addClass(validClass);
                $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);

            }, 1000);

        }

    });

});


  </script> 



</head>
<body>


    <form id="form1" method="post" action=""> 
        <div class="form-row"><span class="label">Username *</span><input type="text" name="name" /></div>
        <div class="form-row"><span class="label">Email address </span><input type="text" name="email" /></div>
        <div class="form-row"><span class="label">Street address *</span><input type="text" name="address" /></div>
        <div class="form-row"><span class="label">Year of birth</span><input type="text" name="date" /></div> 

      <div class="form-row"><input class="submit" type="submit" value="Submit"></div> 
    </form>



</body>
</html>
4

1 に答える 1

0

あなたのコード...

  • nameフィールドの 2 つのルールの間にカンマがありませんでした。

  • urlは、ルールをの外に置くことで不適切に使用していましたrules: {}。あなたのフォームにはそのようなルールを必要とするものは何もないので、削除しました。

  • プラグインが完全に欠落しているようです。jQueryをインクルードした後、jQuery Validate プラグインを実際にどこかに「インクルード」する必要があります。



<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" type="text/javascript"></script>

それ以外の場合、提示したコードは現在機能しています: http://jsfiddle.net/4FGmx/

$(document).ready(function () {

    $("#form1").validate({
        rules: {
            name: {
                required: true,
                minlength: 5,
                maxlength: 10
            },
            address: {
                number: true
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: {
                minlength: jQuery.format("At least {0} characters required.")
            }
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass(errorClass).removeClass(validClass);
            $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
            setTimeout(function () {
                $(element).removeClass(errorClass).addClass(validClass);
                $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
            }, 1000);
        }
    });

});

ルールの仕様に従って、次のことができます。rangelengthとを使用する代わりにルールを使用minlengthしていることに注意してくださいmaxlength。 利用可能なすべてのルールについては、ドキュメントを参照してください。

addressフィールドを「数字で始まる」だけにしたい場合は、ルールを削除しnumberて独自のカスタム正規表現関数を作成し、addMethodメソッドを使用して組み込む必要があります。

デモ: http://jsfiddle.net/4FGmx/1/

    rules: {
        name: {
            required: true,
            rangelength: [5,10]
        },
        address: {
            mycustomrule: true
        },
        email: { 
            required: true,
            email: true
        },
        date: {
            required: true,
            number: true
        }
    },
于 2013-03-30T00:55:25.827 に答える