如何validation最大字段是否大于最小字段?
我在表单中有几组最小和最大字段,用户可以通过填写最小值和最大值来指定范围。 我正在使用jQuery的Validate插件进行表单validation。 我想设置一个validation规则来强制最大字段大于最小值。 每当更改max 或 min字段值时,都会调用此方法。
我知道我可以设置某种基本的自定义validation方法,如下所示:
$.validator.addMethod("greaterThan", function(value, max, min){ return parseInt(value) > parseInt($(min).val()); }, "Max must be greater than min" );
然后为max元素添加规则:
rules: { maxTruck: {greaterThan: '#minTruck'} }
但它有点复杂,因为这仅适用于最大字段更改时,而不是最小字段。 有没有简单的方法可以做到这一点,而无需编写lessThan方法并将其应用于min字段?
然后我想解决另一件事 – 是否有任何简单的方法我可以一般地应用这个而不必枚举每个最大字段以及它映射到的最小值? 所以我可以只有一个min和max类并调用类似的东西:
$(".max").rules('add', { greaterThan: ".min" });
并以某种方式设置方法,以便能够弄清楚(可能基于共享属性?)最大字段与最小字段配对?
更新:
我在这篇文章中提到的基本逻辑可以在这个jsfiddle中看到。 但是,我还没有真正开展这么多工作 – 我正在寻找基本上按照我描述的方式链接最小和最大字段集的逻辑。 而且我不知道这是否是最好的方法 – 正如我所提到的,我希望能够通常这样做,这样我就不必通过id来引用最小和最大字段。
好的,这里应该有用。 该规则基于内置的equalTo
方法:
$.validator.addMethod("greaterThan", function (value, element, param) { var $min = $(param); if (this.settings.onfocusout) { $min.off(".validate-greaterThan").on("blur.validate-greaterThan", function () { $(element).valid(); }); } return parseInt(value) > parseInt($min.val()); }, "Max must be greater than min");
示例: http : //jsfiddle.net/tUPQc/2/
要使规则更通用,您将不得不使用addClassRules
:
$.validator.addMethod("greaterThan", function (value, element, param) { var $element = $(element) , $min; if (typeof(param) === "string") { $min = $(param); } else { $min = $("#" + $element.data("min")); } if (this.settings.onfocusout) { $min.off(".validate-greaterThan").on("blur.validate-greaterThan", function () { $element.valid(); }); } return parseInt(value) > parseInt($min.val()); }, "Max must be greater than min"); $.validator.addClassRules({ greaterThan: { greaterThan: true } });
然后在你的HTML中:
示例: http : //jsfiddle.net/tUPQc/3/
使用addmethod的简单而好的方法
$.validator.addMethod("greaterThan", function (value, element, param) { var $min = $(param); if (this.settings.onfocusout) { $min.off(".validate-greaterThan").on("blur.validate-greaterThan", function () { $(element).valid(); }); } return parseInt(value) > parseInt($min.val()); }, "Must be greater than to field 1");
validation代码
filed2_name: { greaterThan: '#filed1_id' },
第二,我首选
$.validator.addMethod('le', function(value, element, param) { return this.optional(element) || value <= $(param).val(); }, 'Invalid value'); $.validator.addMethod('ge', function(value, element, param) { return this.optional(element) || value >= $(param).val(); }, 'Invalid value'); $('form').validate({rules: { fieldName1: {le: '#fieldID2'}, fieldName2: {ge: '#fieldID1'}, ... }, messages: { fieldName1: {le: 'Must be less than or equal to field 2'}, fieldName2: {ge: 'Must be greater than or equal to field 1'}, ... } });