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

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

jQuery.validator.addMethod('mypassword', function(value, element) { return this.optional(element) || (value.match(/[AZ]/) && 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和unhighlight回调函数以及CSS class 。 以下内容似乎非常详细，但它只是为了显示密码字段旁边的图像。 如果你想在所有字段旁边显示图像，它可以大大简化。

CSS ：

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

HTML ：

jQuery ：

 $(document).ready(function () { jQuery.validator.addMethod('mypassword', function (value, element) { return this.optional(element) || (value.match(/[AZ]/) && 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工作，但看看源代码并试一试