Question

我有使用JSP动态生成的表单和表单文本字段。我正在使用Jquery验证，但想添加functionlaty以防止在表单中重复输入。

E.g。

<form name="myForm" id="myForm">
      <input type="text" name="text1" id="text1">
      <input type="text" name="text2" id="text2">
      <input type="text" name="text3" id="text3">
      =
      = 
      N number of form fields
      <input type="text" name="textn" id="textn">

</form>

我想检查是否使用jQuery验证在文本字段中输入了任何重复值。

Answer 1

我对jquery验证很新，但我有一个类似的问题要解决，我提出了以下解决方案（使用以前的答案获取灵感！）：

使用Javascript：

jQuery.validator.addMethod("unique", function(value, element, params) {
    var prefix = params;
    var selector = jQuery.validator.format("[name!='{0}'][unique='{1}']", element.name, prefix);
    var matches = new Array();
    $(selector).each(function(index, item) {
        if (value == $(item).val()) {
            matches.push(item);
        }
    });

    return matches.length == 0;
}, "Value is not unique.");

jQuery.validator.classRuleSettings.unique = {
    unique: true
};

用法：

<input name="currency1" unique="currency" />
<input name="currency2" unique="currency" />

在这里演示：http://jsfiddle.net/mysteryh/bgzBY/

Answer 2

Bug Magnet你的答案不是扩展jquery验证的功能。它是一个单独的脚本。

您可以通过在In jquery.validate.js中进行这些更改来实现此目的：

第275行：为唯一方法添加消息

messages: {
        unique: "This answer can not be repeated.",

第744行：为唯一

添加新的类规则

classRuleSettings: {
        unique: { unique: true },

最后第899行：添加新的唯一方法

methods: {

        unique: function (value, element) {
            var parentForm = $(element).closest('form');
            var timeRepeated = 0;
            $(parentForm.find('input:type=text')).each(function () {
                if ($(this).val() === value) {
                    timeRepeated++;
                }
            });
            if (timeRepeated === 1 || timeRepeated === 0) {
                return true
            }
            else { 
                return false
            }
        },

现在只需在调用验证函数时，您就可以使用这样的独特方法：

$("#signupForm").validate({
    rules: {
        firstname: "required",
        lastname: "required",
        username: {
            required: true,
            unique: true,
            minlength: 2
        },

Answer 3

这样的事情应该有效：

$(function(){

$('input[name^="text"]').change(function() {

    var $current = $(this);

    $('input[name^="text"]').each(function() {
        if ($(this).val() == $current.val() && $(this).attr('id') != $current.attr('id'))
        {
            alert('duplicate found!');
        }

    });
  });
});

简而言之，这是如何工作的：每当用户在文本框中输入内容时，JQuery循环遍历表单中的所有文本框，并将其值与用户刚刚输入的值进行比较，如果重复值为发现，然后提醒用户。

Answer 4

对于这篇文章的新观众来说，它的价值......我似乎无法让这些解决方案适合我（我使用的是v1.13.1）。所以我做了一点Frankensteining并将几个答案中的碎片拼凑在一起以创造我需要的东西（并反过来为这个问题创造另一个答案）。我的场景类似于@Vicky，因为我需要字段都是唯一的。但是，如果该字段不是必填字段，那么它可以为空。

使用@XGreen的部分解决方案，以及@Stephen Bugs Kamenar的建议，这是我提出的解决方案：

解决方案

0.0.0.1_007_JavaSE

如何使用

要使用此解决方案，您只需将类的值唯一添加到您想要唯一的输入字段中：

$.validator.addMethod("unique", function(value, element) {
    var parentForm = $(element).closest('form');
    var timeRepeated = 0;
    if (value != '') {
        $(parentForm.find(':text')).each(function () {
            if ($(this).val() === value) {
                timeRepeated++;
            }
        });
    }
    return timeRepeated === 1 || timeRepeated === 0;

}, "* Duplicate");

在上面的示例中，如果firstName和lastName的值相同，则jQuery Validate将抛出错误。

适用于jQuery.Validate v1.13.1或更高版本。

Answer 5

如果我没弄错的话，你可以稍微缩小重复的比较。例如，我只想查看同一个类的其他字段，比如'name'：

$(parentForm.find('.name')).each(function () {
            if ($(this).val() === value) {
                timeRepeated++;
            }

或者也许：

$('.name').each(function () {
            if ($(this).val() === value) {
                timeRepeated++;
            }

Answer 6

 <input type="text" id= "txtName" class="name" onfocusout="checkName(this)">
 function checkName(thisvalues) {
        var currentval = $('#' + thisvalues.id).val();
        $('.name').each(function () {
            console.log(this.value + ',' + this.id);
            if (currentval == this.value && thisvalues.id != this.id) {
                alert('With' + this.value+ 'name already exists');
            }
        });
    }

Answer 7

我不会使用Validator插件，但是，这个http://jsfiddle.net/6dbrjbg6/2/也许可以提供帮助：

function ISeeWhatYouDidThere(e) {
    var $repeat = 0,
        $val = e.val(),
        $parent = "#" + e.closest("div").attr("id")
    ;
    if($.trim($val) == "")
        return;
    e.removeClass("ui-state-error");
    $("input", $parent).each(function() {
        if($(this).val() == $val)
            $repeat++;
    });
    if($repeat <= 1)
        return;
    alert("Repetido!");
    e.addClass("ui-state-error");
}
/////////////////////////////////
$("input","div").blur(function(){
    ISeeWhatYouDidThere(
        $(this)
    );
});

Answer 8

这应该有效：

HTML

<form name="myForm" id="myForm">
   <input type="text">
   <input type="text">
   <input type="text">
   <input type="text">
   <button>Click</button>
</form>

JQuery的

$(function(){

    $('button').click(function(){

    var len = $('input').length,i,k;
    $('input').css({'border':'solid 1px #888'})

    for(i=0; i < len; i++){
      var v = $('input:eq('+ i +')').val();
      for( k=0; k < i; k++ ){
        var s = $('input:eq('+ k +')').val();
        if( s == v ){
          $('input:eq('+ i +')').css({'border':'solid 1px #F00'})
          $('input:eq('+ k +')').css({'border':'solid 1px #F00'})
          return false;
        }
       }
     }
  })

})

Answer 9

我知道这是一个老问题，答案与原始问题略有出入，但我拖了一段时间，因为我只想检查一个特定领域与另一个特定领域，但无法理解以其他方式工作。 jQuery验证带有equalTo验证器。 https://jqueryvalidation.org/equalTo-method/

其中的源代码如下：

equalTo: function( value, element, param ) {

        // Bind to the blur event of the target in order to revalidate whenever the target field is updated
        var target = $( param );
        if ( this.settings.onfocusout && target.not( ".validate-equalTo-blur" ).length ) {
            target.addClass( "validate-equalTo-blur" ).on( "blur.validate-equalTo", function() {
                $( element ).valid();
            } );
        }
        return value === target.val();
    }

采用此代码并使用addMethod函数，就像将===交换为!==一样：

jQuery.validator.addMethod("notEqualTo", function(value, element, param) {
        // Bind to the blur event of the target in order to revalidate whenever the target field is updated
        var target = $( param );
        if ( this.settings.onfocusout && target.not( ".validate-equalTo-blur" ).length ) {
            target.addClass( "validate-equalTo-blur" ).on( "blur.validate-equalTo", function() {
                $( element ).valid();
            } );
        }
        return value !== target.val();
        // condition returns true or false
    }, "Values must be unique");

然后在“规则”部分中应用：

 'first_name':{
      required: true,
      notEqualTo: '#last_name'
  }

Answer 10

这里是先前答案中的另一个稍作修改的答案。

此代码针对具有相同 name 的表单元素检查重复值（从HTML角度来看，这是完全有效的）。

例如：

<input type="email" name="emailField" id="email-1" />
<input type="email" name="emailField" id="email-2" />
<input type="email" name="emailField" id="email-3" />

注意：您甚至不需要ID，只是为了完整性而显示。

以下自定义验证器将验证这些输入是否具有唯一值：

$.validator.addMethod('unique', (value, element) => {
    var timeRepeated = 0;
    if (value && value.length)
    {
        $(`input[name=${(element as HTMLFormElement).name}]`).each(function ()
        {
            if ($(this).val() === value)
            {
                timeRepeated++;
            }
        });
    }
    return timeRepeated === 1 || timeRepeated === 0;
});

注意：这是TypeScript，但可以轻松转换回纯JS。

请确保在其他地方启用该规则，例如：

var myValidationRules = {
  emailField: {
    unique: true
  }
}

然后在上面的验证器定义上添加一条验证消息，或使用validator.settings.messages属性。

Answer 11

function ISeeWhatYouDidThere(e) {
    var $repeat = 0,
        $val = e.val(),
        $parent = "#" + e.closest("div").attr("id")
    ;
    if($.trim($val) == "")
        return;
    e.removeClass("ui-state-error");
    $("input").each(function() {
        if($(this).val() == $val)
            $repeat++;
    });
    if($repeat <= 1)
        return;
    alert("Repetido!");
    e.addClass("ui-state-error");
}
/////////////////////////////////
$("input","div").blur(function(){
    ISeeWhatYouDidThere(
        $(this)
    );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="validDiv01">
    <input />
    <input />
    <input />
</div>
<hr />
<div id="validDiv02">
    <input />
    <input />
    <input />
</div>
<hr />
<div id="validDiv03">
    <input />
    <input />
    <input />
</div>

遵循此操作以使用jquery验证唯一输入值

使用Jquery验证防止重复值

11 个答案:

解决方案

如何使用