用于检查文本框值的jQuery Validation插件规则等于某些文本

Question

我有一个文本框,我想检查用户输入的值是否等于"Jhon"或某个名称.我尝试使用EqualTo验证规则,但它不起作用.

$('#home').validate({
        rules: {            
          name: {
            required: true,
            equalTo: 'Jhon'
          },

           highlight: function(element) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
          },
          success: function(element) {
            element
            .text('OK!').addClass('valid')
            .closest('.control-group').removeClass('error').addClass('success');
            }
      });

});

Answer 1

您的代码有三个问题:

1)equalTo规则是将一个字段与另一个字段匹配,而不是字符串.要匹配字符串,您需要使用该addMethod方法编写自定义方法,我将在下面显示.

2)你放错了位置highlight和success 内部的的rules选项.只有字段名称和规则声明才能进入rules.在highlight和success回调函数是兄弟姐妹的rules,没有后代.你也错误地放置了一个);内部.validate().

3)您正在使用highlight回调函数,但您没有使用其补充功能,unhighlight.无论你设置什么highlight,都应该只使用unhighlight.

这是您下面的更正代码......

$(document).ready(function () {

    $.validator.addMethod("customrule", function(value, element, param) { 
        return this.optional(element) || value === param; 
    }, "You must enter {0}");

    $('#home').validate({
        rules: {
            name: {
                required: true,
                customrule: 'John'
            }
        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        unhighlight: function (element) {
            $(element).closest('.control-group').removeClass('error').addClass('success');
        },
        success: function (element) {
            element.text('OK!').addClass('valid');
        }
    });

});

工作演示:http: //jsfiddle.net/VYceT/