如何通过欧芹验证器检查所有输入是否彼此不同

Question

抱歉我是初学者 *** 我有 6 个 School Children id，老师会把这个 id 放上去不重要，但他必须至少放 1 个 .. 或者当他放更多的时候，它们必须彼此不同。

我在这里使用 parsley.js 来验证我的测试：jsfiddle

我尝试检查 6 个以上的输入是否彼此不同，因为如果输入相同，则类似字段上会出现一条消息 .. by parsley 和 jq 。那就是我所做的

    <form action="" id="homeform" method="POST" style="width: 100%;"  novalidate="novalidate">
  <input type="text" class="datac selector"  data-parsley-date="" name="m1" id="m1" />
 <input type="text" class="datac selector"  data-parsley-date="" name="m2" id="m2" />
 <input type="text" class="datac selector"  data-parsley-date="" name="m3" id="m3" />
 <input type="text" class="datac selector"  data-parsley-date="" name="m4" id="m4" />
 <input type="text" class="datac selector"  data-parsley-date="" name="m5" id="m5" />
 <input type="text" class="datac selector"  data-parsley-date="" name="m6" id="m6" />
    <button id="submit" type="submit">Check Out</button>

 </form>
<script type="text/javascript">

window.ParsleyValidator
    .addValidator(
        'date',
        function(value, requirements) {

    $(this).attr('value', $(this).val());
var values = []
$('.selector').each(function(){
if ($(this).val() != ''){
if(!values.includes(this.value)){
 values.push(this.value)
      return true;
         $(this).css("border-color", ""); 
   }else{
    values.push(this.value)
    $(this).css("border-color", "red");
      return false;

}   

}

});
},
        34
    )
    .addMessage('en', 'date', "Enter a valid date");
</script>

无论如何，我可以将 JavaScript 与欧芹验证器结合起来？

Answer 1

根据此处找到的详细信息，https://parsleyjs.org/doc/index.html#custom以下示例应该有用。

.selector {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.js" integrity="sha512-Fq/wHuMI7AraoOK+juE5oYILKvSPe6GC5ZWZnvpOO/ZPdtyA29n+a5kVLP4XaLyDy9D1IBPYzdFycO33Ijd0Pg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<form id="homeform" action="" method="post">
  <p>Enter Dates</p>
  <div data-parsley-check-empty="1">
    <input type="text" class="datac selector" data-parsley-unique-date="" data-parsley-group="block-1" name="m1" id="m1" />
    <input type="text" class="datac selector" data-parsley-unique-date="" data-parsley-group="block-1" name="m2" id="m2" />
    <input type="text" class="datac selector" data-parsley-unique-date="" data-parsley-group="block-1" name="m3" id="m3" />
    <input type="text" class="datac selector" data-parsley-unique-date="" data-parsley-group="block-1" name="m4" id="m4" />
    <input type="text" class="datac selector" data-parsley-unique-date="" data-parsley-group="block-1" name="m5" id="m5" />
    <input type="text" class="datac selector" data-parsley-unique-date="" data-parsley-group="block-1" name="m6" id="m6" />
  </div>
  <button id="submit" type="submit">Check Out</button>
</form>
<script>
  window.Parsley.addValidator(
    'uniqueDate', {
      validateString: function(value) {
        var count = 0;
        $(".selector").each(function(i, el) {
          if (value === $(el).val()) {
            count++;
          }
        });
        return (count <= 1);
      },
      messages: {
        en: 'All dates must be Unique.',
      }
    }
  );

  window.Parsley.addValidator(
    'checkEmtpy', {
      messages: {
        en: 'You must fill in at least one of these dates!'
      },
      requirementType: 'integer',
      validate: function(_value, requirement, instance) {
        console.log("Group Validation");
        for (var i = 1; i <= requirement; i++) {
          if (instance.parent.isValid({
              group: 'block-' + i,
              force: true
            })) {
            return true; // One section is filled, this check is valid
          }
        }
        return false; // No section is filled, this validation fails
      }
    });

  var formInstance = $("#homeform").parsley({
      inputs: Parsley.options.inputs + ',[data-parsley-check-empty]'
    })
    .on('form:submit', function() {
      console.log("Submit Event");
      return false; // Don't submit form for this demo
    });
</script>

首先，您的语法不正确。 .addValidator() 似乎需要与数据属性对应的字符串和定义详细信息的对象。

您说过您希望每个字段都具有唯一值。当验证器检查每个字段时，应该只有一个或更少的 value。我们假设失败并开始计数。然后我们遍历每个字段并将我们的 value 与每个字段的值进行比较，如果它们匹配则增加计数。我们知道它必须至少匹配其中之一，即我们正在验证的那个。如果 count 小于或等于 1，我们可以 return 有效响应。

如何通过欧芹验证器检查所有输入是否彼此不同

How Check if all inputs different from each other by parsley validator

javascript

jquery

jquery-ui

parsley