Question

我正在使用验证插件进行jQuery表单验证。我已经验证了密码，最少7个字符和一个大写和oe号码。当我遇到密码有效时，需要在文本字段附近显示正确的图像。否则图像错误。

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


        }
    });

任何想法显示图像

Answer 1

使用errorPlacement, success, highlight and unhighlight callback functions和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/

Answer 2

在这里显示错误时有一个很好的使用图像的例子

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可以工作，但要查看源代码并试一试

jQuery Validation插件显示密码旁边的成功/失败图像

2 个答案: