jquery - 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规则用于将一个字段匹配到另一个字段，而不是字符串。要匹配字符串，您需要使用method编写自定义方法，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/