Javascript 需要复杂jquery验证逻辑的解决方案

我正在rails应用程序中使用jquery验证。我想将某些规则与某些触发器相关联。我写逻辑有困难。我会尽可能清楚地解释我想要什么

规则：

最大长度为25个字符

最小长度为3个字符

字符只能是字母数字或空格

触发因素：

maxlength应仅在keyup时触发

minlength应仅在提交时触发

无效字符应触发onkeyup

我在逻辑上遇到了问题，当少于3个字符时，如何在keyup上触发一个无效字符。我用于无效字符的正则表达式是

/^[a-z\d]+$/I

这是我的密码：

$('#custom-tag').validate({
    onkeyup: function (element, event) {
            if (event.which === 9 && this.elementValue(element) === "") {
                return;
            } else if (this.elementValue(element).replace(/\s+/g, ' ').trim().length < 3)  {
                return;
            } else {
                this.element(element);
            }
    },

    rules: {
      tag: {
        minLen: 3,
        maxLen: 25,
        format: true
      }
    }
  });
 });

---

我在我的表单中添加了两个类，这样我可以用两种不同的方式验证它，但它似乎不起作用。似乎一次只能进行一次验证。我做错了什么？

以下是两种方法，您可以尝试：

方法1 根据我的评论，您可以在

keyup

上测试值的有效性，在

blur

上测试长度。这种方法的问题是您必须维护两个不同的错误标签

方法2 您可以允许用户输入任何数据并在

blur

上进行验证。这种方法的好处是，您将只在用户完成键入时进行验证，并且将忽略任何键入更正案例

这两种方法在下面的[JSFiddle]中进行了描述

代码

函数验证输入（el）{
var regex=/^[a-z\d]+$/i；
如果（！正则表达式测试（el.值））{
$（“#err#u valid”）.fadeIn（）
}
否则{
$（“#err_valid”）.fadeOut（）
}
}
功能验证长度（el）{
如果（el.value.length您可以在blur上手动检查长度。Min length check不应该在KeyUp上。您会怎么做？单独调用.validate？我从未使用过jQuery validator插件，但简单的答案是肯定的。这个想法是在用户键入时检查单个字符的有效性，一旦他说我键入完毕，即在blur上，检查是否存在错误。）完整的有效性和长度。也不用检查最大长度，而是使用textbox的maxLength属性。我的javascript不是很好，能够从头开始编写。插件使它很容易，但我只是很难弄清楚如何满足上面提到的所有规则/触发器。请查看我的更新。我正在尝试使用这是你的第一种方法，因为我想要的功能正如我在问题开始时所描述的。看起来我想要做的就是使用这个插件。如果我想要这种类型的功能，我必须从头开始写。谢谢你的输入。
$('.custom-tag-onkeyup').validate({
    onkeyup: function (element, event) {
            if (event.which === 9 && this.elementValue(element) === "") {
                return;
            } else {
                this.element(element);
            }
    },
    rules: {
      tag: {
        maxLen: 25,
        alphanumeric: true
      }
    },
    tooltip_options: {
      tag: { placement: 'right', animation: false }
    }
  });

  $('.custom-tag-onblur').validate({
    onkeyup: false,
    onfocusout: function (element, event) {
                if (event.which === 9 && this.elementValue(element) === "") {
                  return;
                } else {
                  this.element(element);
                }
    },
    rules: {
      tag: {
        minlength: 3
      }
    },
    tooltip_options: {
      tag: { placement: 'right', animation: false }
    }
  });