Javascript 使用jQuery验证插件验证连续日期列表
我正在使用jQuery验证插件对我的表单执行验证。我有一个动态生成的日期列表。它可以包括从o到x的日期数量。我需要验证此日期列表是否按顺序排列,并且列表末尾的任何日期都不早于列表中较早出现的日期 我已经研究了addMethod和addClassRules函数来添加这些自定义规则,但是我仍然不清楚如何实现这一点,如果其中只有一个不符合顺序,那么不会导致整个日期列表的验证失败 以前有人用Validate插件做过这种验证吗 现在,我正在使用Validate方法在javascript中添加规则,而不是向元素添加类。下面是我正在做的一个例子:Javascript 使用jQuery验证插件验证连续日期列表,javascript,jquery,validation,Javascript,Jquery,Validation,我正在使用jQuery验证插件对我的表单执行验证。我有一个动态生成的日期列表。它可以包括从o到x的日期数量。我需要验证此日期列表是否按顺序排列,并且列表末尾的任何日期都不早于列表中较早出现的日期 我已经研究了addMethod和addClassRules函数来添加这些自定义规则,但是我仍然不清楚如何实现这一点,如果其中只有一个不符合顺序,那么不会导致整个日期列表的验证失败 以前有人用Validate插件做过这种验证吗 现在,我正在使用Validate方法在javascript中添加规则,而不是向
$('#SaveForm').validate(
{
focusInvalid: false,
errorContainer: errorContainer,
errorLabelContainer: $("ol", errorContainer),
wrapper: 'li',
highlight: function(element) {
$(element).addClass('field-validation-error');
$(element).addClass('input-validation-error');
},
unhighlight: function(element) {
$(element).removeClass('field-validation-error');
$(element).removeClass('input-validation-error');
},
invalidHandler: function() {
$('#notifyBar').showNotifyBar({
notifyText: 'There are errors on the form. Please see the bottom of the page for details',
backgroundColor: '#FF0000'
})
},
rules: {
SystemComment: {
maxlength: 8000
},
WorkComment: {
maxlength: 8000
},
DispositionGroup: {
required: true
},
DispositionCategory: {
required: true
},
DispositionDetail: {
required: true
},
NextWorkDate: {
required: true,
date: true
}
},
messages: {
SystemComment: {
maxlength: "System Comment max length is 8000 characters"
},
WorkComment: {
maxlength: "Work Comment max length is 8000 characters"
},
DispositionGroup: {
required: "Disposition Group is required"
},
DispositionCategory: {
required: "Disposition Category is required"
},
DispositionDetail: {
required: "Disposition Detail is required"
},
NextWorkDate: {
required: "Next Work Date is required",
date: "Next Work Date must be in mm/dd/yyyy format"
}
}
});
我添加了这些方法来进行验证,但如果其中一个失败,则会导致所有字段的验证都失败:
jQuery.validator.addMethod("currency", function(value, element) { return this.optional(element) || /^(\d{1,3})(\.\d{1,2})?$/.test(value); }
, "Payment Amount must be in currency format xx.xx");
jQuery.validator.addMethod("paymentDateCheck", validatePaymentDates, "Payment Date(s) must be in sequential order and may not be prior to today");
jQuery.validator.addMethod("paymentAmountCheck", validatePaymentAmounts, "Total Payment Amount cannot exceed the Customer Balance");
jQuery.validator.addClassRules({
paymentAmountField: {
required: true,
currency: true,
paymentAmountCheck: true
},
paymentDateField: {
required:true,
date:true,
paymentDateCheck:true
}
});
jQuery.extend(jQuery.validator.messages, {
required: "Payment Date and Payment Amount are required",
date: "Please specifiy valid date(s)",
currency: "Amount must be in currency format (00.00)"
});
好的,我来做这个。以下是我相当天真的实现: 一,。添加自定义验证方法: 二,。添加类规则元素必须包含paymentDateField类 三,。实现validatePaymentDate函数: 该函数可以重构以消除如此多的循环,但它产生了预期的效果。只有顺序错误的日期字段被标记为无效
$.validator.addMethod("paymentDate", function(value, element) {
return this.optional(element) || validatePaymentDate(value, element);
}, "Payment Date(s) is required, must be in date format, and must be in order");
$.validator.addClassRules({
paymentDateField: {
required: true,
date: true,
paymentDate: true
}
});
function validatePaymentDate(value, element) {
var paymentDates = $('.paymentDateField');
var dateArray = new Array();
var arrayIndex = 0;
var currentElementIndex = 0;
var isValid = true;
$(paymentDates).each(function() {
var currentElementVal = $(this).val();
dateArray[arrayIndex] = currentElementVal;
if (currentElementVal == $(element).val()) {
currentElementIndex = arrayIndex;
return false;
}
arrayIndex++;
});
for (var x = 0; x <= arrayIndex; x++) {
console.log('array val: ' + dateArray[x]);
console.log('dateVal: ' + value);
if (x > currentElementIndex) {
isValid = new Date(dateArray[x]) > new Date(value);
}
if (x < currentElementIndex) {
isValid = new Date(dateArray[x]) < new Date(value);
}
}
return isValid;
}