2

検証プラグインを使用してjQueryフォーム検証を使用しています。最小7文字と1つの大文字と数字でパスワードを検証しました。同時に、パスワードが有効であることを確認したら、テキストフィールドの近くに正しい画像を表示する必要があります。そうでなければ間違ったイメージ。

jQuery.validator.addMethod('mypassword', function(value, element) {
        return this.optional(element) || (value.match(/[A-Z]/) && value.match(/[0-9]/));
    },
    'Password must contain at least one capital and one number.');


    jQuery("#loanRequestDetailsForm").validate({
        ignore: "",
        rules : {

        password: {
                required: true,
                minlength: 7,
                mypassword :true
            },
            confirmpassword: {
                required: true,
                minlength: 7,
                equalTo: "#password"
            }


        },
        messages : {

            password : {
                required:"Please provide a password",
                minlength:"Your password must be at least 7 characters long"    
            },  
            confirmpassword : {
                required:"Please provide a password",
                minlength:"Your password must be at least 7 characters long",
                equalTo: "Please enter the same password as above"
            }


        }
    });

画像を表示するための任意のアイデア

4

2 に答える 2

6

errorPlacement、success、highlightおよびunhighlightコールバック関数と CSSの組み合わせを使用しますclass。以下は非常に冗長に見えますが、パスワード フィールドの横にある画像のみを表示するためです。代わりにすべてのフィールドの横に画像を表示したい場合は、大幅に簡素化できます。

CSS :

.passError {
    background: url("bad.gif") no-repeat 0px 0px;
}
.passValid {
    background: url("good.gif") no-repeat 0px 0px;
}

HTML :

<input type="text" class="pw" name="password" id="password" />
<input type="text" class="pw" name="confirmpassword" />

jQuery :

$(document).ready(function () {

    jQuery.validator.addMethod('mypassword', function (value, element) {
        return this.optional(element) || (value.match(/[A-Z]/) && value.match(/[0-9]/));
    }, 'Password must contain at least one capital and one number.');

    $('#loanRequestDetailsForm').validate({ // initialize the plugin
        errorPlacement: function (error, element) {
            error.insertAfter(element);
            if (element.hasClass('pw')) {
                element.next().removeClass('passValid').addClass('passError');
            }
        },
        success: function (label) {
            if (label.prev().hasClass('pw')) {
                label.text("ok!");
            }
        },
        highlight: function (element, errorClass, validClass) {
            if ($(element).hasClass('pw')) {
                $(element).next().removeClass('passValid').addClass('passError');
            } else {
                $(element).addClass(errorClass).removeClass(validClass);
            }
        },
        unhighlight: function (element, errorClass, validClass) {
            if ($(element).hasClass('pw')) {
                $(element).next().removeClass('passError').addClass('passValid');
            } else {
                $(element).removeClass(errorClass).addClass(validClass);
            }
        },
        rules: {
            password: {
                required: true,
                minlength: 7,
                mypassword: true
            },
            confirmpassword: {
                required: true,
                //minlength: 7, // <- redundant
                equalTo: "#password"
            }
        },
        messages: {
            password: {
                required: "Please provide a password",
                // use the placeholder {0} to automatically insert rule val
                minlength: "Your password must be at least {0} characters long"
            },
            confirmpassword: {
                required: "Please provide a password",
                equalTo: "Please enter the same password as above"
            }
        }
    });

});

実際のデモ: http://jsfiddle.net/jtmDY/

于 2013-02-15T18:13:05.340 に答える
4

ここにエラーを表示するときに画像を使用する良い例があります

http://jquery.bassistance.de/validate/demo/custom-methods-demo.html

このcssを使用して、エラーの画像を取得する方法

em.error {
  background:url("images/unchecked.gif") no-repeat 0px 0px;
  padding-left: 16px;
}

この例が設定されていることに注意してください

errorElement: "em"

cssは機能しますが、ソースを調べて試してみてください

于 2013-02-15T09:14:37.367 に答える