jQuery验证多个不相等的输入 [英] jQuery validation of multiple not equal inputs

问题描述

我已经设法在我的表单上设置了jQuery验证插件，并给出了两个值不符合的字段的规则。具体来说，电子邮件和email_2输入现在不能相同，而且有效。但我真正的需要是以相同的方式验证多个输入（在这种情况下为4个）。我有电子邮件，email_2，email_3，email_4，都不应该是平等的。您可以在我的 jsfiddle here 中看到它，如果您有解决方案，您可以更新它并将其重新放入答案：

html：

 < form id =signupform method =post> 
< input id =emailname =username/> 
< br /> 
< input id =email_2name =email_2/> 
< br /> 
< input id =email_3name =email_3/> 
< br /> 
< input id =email_4name =email_4/> 
< br /> 
< input id =submittype =submitvalue =submit/> 
< / form> 
  

jquery：

 code> $。validator.addMethod（notequal，function（value，element）{
 return $（'＃email'）。val（）！= $（'＃email_2'）。val ）}，
*你已经输入了这个）; 
 
 //验证表单
 $（＃signupform）。validate（{
 
 rules：{
 email：{
 required ：true，
 notequal：true 
}，
 email_2：{
 required：true，
 notequal：true 
}，
} 
}）; 
  

什么是验证所有输入的最佳解决方案？

解决方案

是的，它仍然适用于1.10.1

演示

href =http://www.anujgakhar.com/2010/05/24/jquery-validator-plugin-and-notequalto-rule-with-multiple-fields/ =nofollow noreferrer> http：// www .anujgakhar.com / 2010/05/24 / jquery-validator-plugin-and-notequalto-rule-with-multiple-fields /

HTML

 < form id =signupformmethod =post> 
< p> 
< input class =distinctemailsid =emailname =username/>< / p> 
< p> 
< input class =distinctemailsid =email_2name =email_2/>< / p> 
< p> 
< input class =distinctemailsid =email_3name =email_3/>< / p> 
< p> 
< input class =distinctemailsid =email_4name =email_4/>< / p> 
< p> 
< input id =submittype =submitvalue =submit/> 
< / p> 
< / form> 
  

jQuery

  jQuery.validator.addMethod（notEqualToGroup，function（value，element，options）{
 //获取同一个类中传递的所有元素
 var elems = $（element） .parents（'form'）。find（options [0]）; 
 //当前元素的值
 var valueToCompare = value; 
 // count 
 var matchesFound = 0; 
 //循环每个元素，并将其值与当前值
 //进行比较，并在每次找到一个
时增加计数jQuery.each（elems，function（）{
 thisVal = $（this）.val（）; 
 if（thisVal == valueToCompare）{
 matchesFound ++; 
} 
}）; 
 // count应为0或1 max 
 if（this.optional（element）|| matchesFound< = 1）{
 //elems.removeClass('error'）; 
返回true ; 
} else {
 //elems.addClass('error'）; 
} 
}， jQuery.format（请输入唯一值））
 
 //验证表单
 $（＃signupform）。validate（{
 
 rules ：{
 email：{
 required：true，
 notEqualToGroup：['.distinctemails'] 
}，
 email_2：{
 required：true， 
 notEqualToGroup：['.distinctemails'] 
}，
 email_3：{
 required：true，
 notEqualToGroup：['.distinctemails'] 
} ，
 email_4：{
 required：true，
 notEqualToGroup：['.distinctemails'] 
}，
}，
}）; 
  

I've managed to set up jQuery validate plugin on my form and I gave rules for two fields in which their values should not match. Specifically, the email and email_2 inputs can not be the same now, and that works. But my real need is to validate multiple inputs in the same way (in this case 4 of them). I have email, email_2, email_3, email_4 and none of them should not be equal. You can see it in my jsfiddle here, and if you have solution, you can update it and put it back in answer:

html:

<form id="signupform" method="post">
<input id="email" name="username" />
<br/ >
<input id="email_2" name="email_2" />
<br />
<input id="email_3" name="email_3" />
<br />
<input id="email_4" name="email_4" />
<br />
<input id="submit" type="submit" value="submit" />   
</form>

jquery:

$.validator.addMethod("notequal", function(value, element) {
 return $('#email').val() != $('#email_2').val()}, 
 "* You've entered this one already");

// validate form    
$("#signupform").validate({

rules: {
    email: {
        required: true,
        notequal: true
    },
    email_2: {
        required: true,
        notequal: true
    },
},
});

what is the best solution for validate of all inputs?

解决方案

Yes, it still works with 1.10.1

DEMO

source: http://www.anujgakhar.com/2010/05/24/jquery-validator-plugin-and-notequalto-rule-with-multiple-fields/

HTML

<form id="signupform" method="post">
    <p>
        <input class="distinctemails" id="email" name="username" /></p>
    <p>
        <input class="distinctemails" id="email_2" name="email_2" /></p>
    <p>
        <input class="distinctemails" id="email_3" name="email_3" /></p>
    <p>
        <input class="distinctemails" id="email_4" name="email_4" /></p>
    <p>
        <input id="submit" type="submit" value="submit" />
    </p>
</form>

jQuery

jQuery.validator.addMethod("notEqualToGroup", function (value, element, options) {
    // get all the elements passed here with the same class
    var elems = $(element).parents('form').find(options[0]);
    // the value of the current element
    var valueToCompare = value;
    // count
    var matchesFound = 0;
    // loop each element and compare its value with the current value
    // and increase the count every time we find one
    jQuery.each(elems, function () {
        thisVal = $(this).val();
        if (thisVal == valueToCompare) {
            matchesFound++;
        }
    });
    // count should be either 0 or 1 max
    if (this.optional(element) || matchesFound <= 1) {
        //elems.removeClass('error');
        return true;
    } else {
        //elems.addClass('error');
    }
}, jQuery.format("Please enter a Unique Value."))

// validate form    
$("#signupform").validate({

    rules: {
        email: {
            required: true,
            notEqualToGroup: ['.distinctemails']
        },
        email_2: {
            required: true,
            notEqualToGroup: ['.distinctemails']
        },
        email_3: {
            required: true,
            notEqualToGroup: ['.distinctemails']
        },
        email_4: {
            required: true,
            notEqualToGroup: ['.distinctemails']
        },
    },
});

这篇关于jQuery验证多个不相等的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！