jquery 表单验证插件：字段 1 不等于字段 2

Question

嘿嘿，

我遇到了以下问题：我尝试阻止用户为“用户名”和“电子邮件”字段选择相同的值。我正在使用 jquery 表单验证插件（http://bassistance.de/jquery-plugins/jquery-plugin-validation/），

如果有人能给我指路，那就太棒了，请在这里查看我的代码：

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

    rules: {
        username: {
            required: true,
            minlength: 2,
            remote: "/_misc/formcheck/username.cfm"
        },
        password1: {
            required: true,
            minlength: 5
        },
        password2: {
            required: true,
            minlength: 5,
            equalTo: "#password1"
        },
        email: {
            required: true,
            email: true,
            remote: "/_misc/formcheck/email.cfm"
        },
        email2: {
            required: true,
            email: true,
            equalTo: "#email"
        },
        usage: "required"                       
    },
    messages: {
        username: {
            required: "please username!!",
            minlength: "username at least 2 chars"
        },
        password1: {
            required: "please password!",
            minlength: "password at least 5 chars"
        },
        password2: {
            required: "please password",
            minlength: "password at least 5 chars",
            equalTo: "password fields have to match"
        },
        email: "validate email please!",            
        email2: {
            required: "please provide correct email address!",              
            equalTo: "email fields must match!"
        },
        usage: "please check my terms!" 
    }, 

提前致谢，米赫贝克

Answer 1

您可以添加检查用户名和电子邮件值的自定义方法，并为该字段添加验证。

演示 - http://jsfiddle.net/2hA8M/8/

示例 -

方法 -

$.validator.addMethod("user_email_not_same", function(value, element) {
   return $('#name').val() != $('#email').val()
}, "* User and Email should not match");

验证 -

rules : {
     username : {
         user_email_not_same: true
     }
 },

Answer 2

这可能更灵活：

$.validator.addMethod("notEqualTo", function (value, element, param)
{
    var target = $(param);
    if (value) return value != target.val();
    else return this.optional(element);
}, "Does not match");

调用：

rules: {
    username: {
        required: true,
        minlength: 2,
        remote: "/_misc/formcheck/username.cfm",
        notEqualTo: "#emailId-or-anyValidJquerySelector"
    }
}

示例：http://jsfiddle.net/4AdWR/1/

或者直接在 Html 中：

<input type="text" name="username" notEqualTo="#emailId-or-anyValidJquerySelector" minlength="2" class="required" />

示例： http://jsfiddle.net/B2hWn/1/

这也尊重您需要/可选的先前验证；）