2

我正在使用验证插件使用 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"
            }


        }
    });

显示图像的任何想法

4

2 回答 2

6

将errorPlacement、success和回调函数highlight与unhighlightCSS结合使用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 回答