27

使用jQuery Validation 插件来验证表单,你将如何确认一个字符串正好是 X 个字符长?

4

4 回答 4

57

由于(当前)没有内置方法,因此您需要添加自己的方法。这会起作用:

jQuery.validator.addMethod("exactlength", function(value, element, param) {
 return this.optional(element) || value.length == param;
}, $.validator.format("Please enter exactly {0} characters."));

然后可以这样使用:

$("#formtovalidate").validate({
  rules: {
    somefield: {
      exactlength: 10
    }
   });

更新 - 它是如何工作的

有人问我这是如何工作的。我不知道所有细节;我在以前存在的方法上对这种方法进行了建模。但是,这是我解释它的最佳尝试。

  • 该函数接受valueelementparam
    • value是在正在验证的字段中输入的值
    • element是字段本身
    • param是规则类型和冒号之后的任何内容。在上面的例子中,它是 10 inexactlength: 10
  • 下一行是一个return声明。这会将验证方法的最终判断返回给调用它的代码。任何返回的验证方法true都是说“这个字段通过了验证!” 它将返回它所在行的值。
  • return后面是两个声明,由“或”运算符 ( )分隔||
    • 运算符的||意思是'评估这个左边的项目。如果为真,则返回真。如果没有,请尝试右侧的那个。如果为真,则返回真。否则,返回假。
      • 左边的项目是this.optional(element)。如果您的规则中不需要该元素,这将返回 true,验证也是如此。这意味着“如果我不告诉你这个字段是必需的,我不在乎它是否有效。”
      • 如果该字段是必需的,我们将移动到||. 这是实际的验证测试。它将字段输入的长度与您指定的长度进行比较。如果它们相同,则返回 true,方法返回 true,验证通过。否则,验证失败。

就是这样。如需进一步帮助,请参阅文档,尤其是有关自定义验证方法的部分。

于 2009-08-04T18:32:03.333 回答
22

例子:

rules : {
"someFieldName":{digits:true,minlength:20,maxlength:20}
}
于 2011-05-17T09:02:38.903 回答
3

您还可以通过提供如下动态消息使现有rangelength方法支持精确范围:

$.extend($.validator.messages, {
    rangelength: function(args, inputElement) {
        var isExactRange, min, max;

        // Cast arguments as numbers
        min = Number(args[0]);
        max = Number(args[1]);

        isExactRange = min === max;

        if (isExactRange) {
            return 'Please enter exactly ' + min + ' characters.';
        }


        return 'Please enter between ' + min + ' and ' + max + ' characters.';
    }
);

可以看出,您可以根据传递给验证方法的参数动态生成消息。消息回调传递验证方法参数作为它们的第一个参数,输入元素被验证作为它们的第二个参数。

这使得可以在指定精确范围时返回一条消息,但如果上限和下限不同则返回另一条消息。

要回退到默认rangelength消息,请替换

'Please enter between ' + min + ' and ' + max + ' characters.'

$.validator.messages.rangelength

如果能更新官方文档会很好,因为它很难导航并且没有描述插件的所有功能。

于 2013-12-15T01:21:35.773 回答
3

最简单的方法是通过数据属性使用现有的验证方法,然后为清楚起见设置自己的验证消息。

<input data-rule-minlength="8" data-rule-maxlength="8" data-msg-minlength="Exactly 8 characters please" data-msg-maxlength="Exactly 8 characters please">
于 2015-11-19T22:26:01.727 回答