代码之家  ›  专栏  ›  技术社区  ›  Vicky

使用jquery验证阻止重复值

  •  27
  • Vicky  · 技术社区  · 14 年前

    我有使用JSP动态生成的表单和表单文本字段。 我正在使用jquery validation,但我想添加功能级别以防止表单中出现重复条目。

    例如。

    <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 validation检查在textfield中是否输入了任何重复的值。

    9 回复  |  直到 6 年前
        1
  •  11
  •   Bug Magnet    14 年前

    这样的方法应该有效:

    $(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将循环访问表单中的所有文本框,并将其值与用户刚输入的值进行比较,如果发现重复值,则向用户发出警报。

        2
  •  28
  •   bpromas MysteryH    9 年前

    我对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/

        3
  •  12
  •   Ali Habibzadeh    14 年前

    bug磁铁您的答案没有扩展jquery validate的功能。它是一个单独的脚本。

    您可以通过在jquery.validate.js中进行以下更改来实现此目的:

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

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

    第744行:为unique添加新的类规则

    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
                }
            },
    

    现在,只要调用validate函数,就可以使用这样的唯一方法:

    $("#signupForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                unique: true,
                minlength: 2
            },
    
        4
  •  5
  •   Pixel Rubble    8 年前

    对于这篇文章的新读者来说,它的价值…我似乎无法得到这些解决方案中的任何一个来为我工作(我使用的是v1.13.1版)。所以我做了一点坦白的工作,从几个答案中拼凑出一些零碎的东西来创造我需要的东西(然后为这个问题创造另一个答案)。我的场景类似于@vicky,因为我需要所有的字段都是独一无二的。但是,如果该字段不是必需字段,那么它可以为空。

    使用@xgreen提供的部分解决方案,以及@stephen bugs kamenar提供的建议,这就是我提出的解决方案:

    解决方案

    $.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");
    


    如何使用

    要使用此解决方案,只需添加 价值为, 独特的 ,到您想要唯一的输入字段:

    <input type="text" class="unique" name="firstName" />
    <input type="text" class="unique" name="lastName" />
    

    在上面的示例中,如果firstname和lastname的值相同,jquery validate将抛出一个错误。


    使用jquery.validate v1.13.1或更高版本。

        5
  •  1
  •   rladd    13 年前

    如果我没弄错的话,你可以把重复比较缩小一点。例如,我只想查看同一类的其他字段,比如说“name”:

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

    或者:

    $('.name').each(function () {
                if ($(this).val() === value) {
                    timeRepeated++;
                }
    
        6
  •  1
  •   copycat    7 年前
     <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');
                }
            });
        }
    
        7
  •  0
  •   Jason Aller    10 年前

    我不会使用验证器插件,但是,也许这个 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)
        );
    });
    
        8
  •  0
  •   Absar Seevayi    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;
            }
           }
         }
      })
    
    })
    
        9
  •  0
  •   Kyle    6 年前

    我知道这是一个古老的问题,答案与最初的问题有些偏离,但我花了一段时间才把头发拔出来,因为我只想检查一个特定字段与另一个特定字段,而不能让它以任何其他方式工作。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'
      }