javascript - jQuery 验证 - 同一类的 NotEqual 验证

Question

我有几个下拉菜单(类名为month_dropdown)，并且下拉菜单的数量不是恒定的。我怎样才能为它们实现 NotEqual 验证。我正在使用 jQuery 验证插件。

这就是我写的 -

jQuery.validator.addMethod("notEqual", function(value, element, param) {
返回 this.可选(元素) ||值!= $(param).val();
}, "请指定不同的值");

jQuery.validator.addClassRules("month_dropdown",{
    notEqual: ".month_dropdown"
});

但是这并不完美，即使我选择不同的月份，它也会弹出消息“请指定不同的值”。

Answer 1

您需要迭代每个输入元素，然后检查其值。

在您的情况下，您始终会根据自身检查第一个选择元素的值，因为 $(param).val() 将始终返回与选择器匹配的第一个输入元素的值 param，因此当针对第一个输入运行测试时，其值将与其自身匹配

jQuery.validator.addMethod("notEqual", function(value, element, param) {
  return this.optional(element) || $(param).not(element).get().every(function(item) {
    return $(item).val() != value;
  });
}, "Please specify a different value");

jQuery.validator.addClassRules("month_dropdown", {
  notEqual: ".month_dropdown"
});

jQuery(function($) {
  var validator = $('#myform').validate({
    rules: {},
    messages: {}
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<form id="myform" method="post" action="">
  <select class="month_dropdown" name="el[1]">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <select class="month_dropdown" name="el[2]">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <select class="month_dropdown" name="el[3]">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <input type="submit" value="Save" />
</form>