我使用验证插件使用jQuery表单验证.
我已经验证了密码,最少7个字符和一个大写和oe号码.当我遇到密码有效时,需要在文本字段附近显示正确的图像.否则图像错误.
我已经验证了密码,最少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,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"
}
}
});
任何想法显示图像
解决方法
使用
仅显示密码字段旁边的图像.如果你想在所有字段旁边显示图像,它可以大大简化.
errorPlacement,success,highlight and unhighlight callback functions和CSS类的组合.以下似乎非常详细,但它是有序的
仅显示密码字段旁边的图像.如果你想在所有字段旁边显示图像,它可以大大简化.
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,'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,validClass) {
if ($(element).hasClass('pw')) {
$(element).next().removeClass('passError').addClass('passValid');
} else {
$(element).removeClass(errorClass).addClass(validClass);
}
},rules: {
password: {
required: true,mypassword: 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/