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

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

对不起，我是初学者*** 我有 6 个学童 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 进行 marge 吗？

解决方法

根据此处找到的详细信息，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，我们可以返回一个有效响应。