jQuery 验证一些输入必须彼此不同

Question

EDIT2:

我觉得我接近解决方案了。按照 vicgoyso 的建议，我从我的输入（而不是数组）创建了一些对象，然后我比较了它们：see the jsfiddle

由于此比较有效：comparison on jsfiddle我希望上面的代码也能正常工作，但事实并非如此。

编辑： 我正在研究的 jQuery 方法与此类似：

$().ready(function(){
    $.validator.addMethod("same_names", function(value, element) {
        if (!$('#surname').val() || $('#surname').val() != null 
                && !$('#surname1').val() || $('#surname1').val() != null){
            return $('#name').val() != $('#name1').val() 
            && $('#surname').val() != $('#surname1').val() 
            && $('#nickname').val() != $('#nickname1').val()
        }

        }, " Your input is equal to another");

    $("#myForm").validate({
        rules: {
            name: {
                required: false,
                same_names: true
            },
            name1: {
                required: false,
                same_names: true
            },
            surname: {
                required: false,
                same_names: true
            },
            surname1: {
                required: false,
                same_names: true
            },
            nickname: {
                required: false,
                same_names: true
            },
            nickname1: {
                required: false,
                same_names: true
            },
        },
        messages: {
         ...
        }
    })
});

继续说名字、姓氏和昵称是必填项，实际上不是。没有 jQuery 我的方法类似于：

$('#myForm').submit(function (event) {
    var errors = false;
    if ($('#name').val() == $('#name1').val() &&
        $('#surname').val() == $('#surname1').val() &&
        $('#nickname').val() == $('#nickname1').val()
        ||
        $('#name').val() == $('#name2').val() &&
        $('#surname').val() == $('#surname2').val() &&
        $('#nickname').val() == $('#nickname2').val()
        ||
        $('#name').val() == $('#name3').val() &&
        $('#surname').val() == $('#surname3').val() &&
        $('#nickname').val() == $('#nickname3').val()
        ||
        $('#name').val() == $('#name4').val() &&
        $('#surname').val() == $('#surname4').val() &&
        $('#nickname').val() == $('#nickname4').val()
        ....
        ||
        $('#name').val() == $('#name10').val() &&
        $('#surname').val() == $('#surname10').val() &&
        $('#nickname').val() == $('#nickname10').val()
        ||
        $('#name1').val() == $('#name2').val() &&
        $('#surname1').val() == $('#surname2').val() &&
        $('#nickname1').val() == $('#nickname2').val()
        ||
        $('#name1').val() == $('#name3').val() &&
        $('#surname1').val() == $('#surname3').val() &&
        $('#nickname1').val() == $('#nickname3').val()
        .... and so on
        ) {
        $("#error").show(); 
        location.href = "#";
                location.href = "#error";
            errors = true;
    } else { 
      errors = false; 
      $("#error").hide();
    }
    if (errors == true) {
      event.preventDefault();
    }
});

我的实际jsp是这样的（有10个输入组，由名字+姓氏+昵称组成）：

<form id="myForm" method="post">
<input id="name" name="name" />
<input id="surname" name="surname" />
<input id="nickname" name="nickname" />
    <br/ >
<input id="name1" name="name1" />
<input id="surname1" name="surname1" />
<input id="nickname1" name="nickname1" />
<br/>
<input id="name2" name="name2" />
<input id="surname2" name="surname2" />
<input id="nickname2" name="nickname2" />
    <br />
<input id="name3" name="name3" />
<input id="surname3" name="surname3" />
<input id="nickname3" name="nickname3" />
    <br />
    <br />
<input id="submit" type="submit" value="submit" />   
</form>

如果这个组（名字，姓氏，昵称）中的一个等于另一个，我想成为一个错误，例如这是一个错误：

约翰
史密斯
王子 *
约翰
史密斯
王子 *
约翰
史密斯
雪人

但这一个不是：

约翰
史密斯
prince 至少有一处不同所以输入没问题
约翰
史密斯
snowman *至少有一处不同所以输入没问题
约翰
史密斯
fireball至少有一个字段不同所以输入没问题

问题如果我想使用此代码怎么办：

这里解决这个问题：

我问是因为我已经在使用 jQuery 验证，如果字段超过两组或为空（不需要这些字段），以前的方法效果不佳。

Answer 1

您首先需要定义一个自定义验证方法： https://jqueryvalidation.org/jQuery.validator.addMethod/

jQuery.validator.addMethod("laxEmail", function(value, element) {
   var duplicateFound = false;

  //apply input values in array
  //check for duplicates
  duplicateFound = true; //update variable if duplicate found 

  return duplicateFound;
}, 'Input values cannot be identical');

在您的自定义验证中，get/store 数组中的输入值： jQuery get values from inputs and create an array

然后检查数组是否有重复项，return如果找到重复项则为真：

然后将自定义验证规则的名称添加到输入验证中，如下所示：

myForm.validate({
  rules: {
   myCustomRule: {
      required: true
   }
  },
  messages {
   myCustomRule: {
     required: "Input values cannot be identical"
   }
  }
});

Answer 2

仅针对这部分：

EDIT2:

I feel I'm near the solution. Following the vicgoyso's suggestion I created some object from my inputs (and not arrays), and then I compared them: see the jsfiddle

Since this comparison is working: comparison on jsfiddle I would expect the code above to work as well, but it's not.

您未能将 jQuery 本身包含在 jsFiddle 中。

主要是它无论如何都行不通，因为你的布尔逻辑是倒退的。当您找到匹配项时，您将获得 true。但是，然后您从 addMethod() 方法 return true，因此使用 true 您告诉它通过验证。要验证失败，您必须 return false 代替。

return !duplicateFound;

最后，要使字段可选，您需要多一点逻辑...

return this.optional(element) || !duplicateFound;

演示：https://jsfiddle.net/awb4tcyy/3/

一般来说，随着字段组的增多，您的代码将变得极其复杂。我建议您利用某种类型的循环算法。祝你好运。

jQuery 验证一些输入必须彼此不同

jQuery validate some input must be different from each other

javascript

jquery

jquery-validate