如何在 jQuery 中越过最大长度时指示错误

Question

在我的表单中，我使用maxlength作为输入字段，也使用jquery.validate.js来指示一些错误消息。

• 如果我在 html 中单独使用maxlength，则只会显示小弹出窗口。
• 如果我单独使用验证，我将收到正确的错误消息，但用户可以输入超过限制。

尽管如此，我实际上并不想要这些场景...

我需要的是一旦到达其maxlength，它应该显示一条错误消息，并且不应该允许用户输入超过 40 个字符。

我不想使用jquery自定义函数，喜欢计算on keyup！

我尝试使用以下代码：

<form id="myForm">
<input name="myName" required maxlength="40" />
</form>

我的jQuery代码如下：

$("#myForm").validate({
    rules :{
        myName :{
            required :true,
            maxlength:40
        },
    },
    messages:{
        maxlength:"You crossed a maximum limit"
    }
});

Answer 1

• 从 input 元素中删除 HTML 5 属性。 当您已经在 .validate() 中声明了相同的规则时，您不需要它们。 我认为自动 HTML 5 浏览器验证消息在对损坏的 jQuery 验证进行故障排除时让您感到困惑。

• 使用 messages 选项指定自定义消息时，还必须指定输入name ，类似于rules选项格式。 在messages中，只有规则名称是可选的。 换句话说，您可以在输入name本身上放置自定义消息，它将自动应用于该输入的所有规则。 但是，您无法像以前那样将自定义消息放置在未分配给输入的规则上。

否则，我在您的代码中看不到问题...

演示：http://jsfiddle.net/a5vBU/

HTML：

<form id="myForm">
    <input name="myName" />
</form>

j查询：

$(document).ready(function () {
    $("#myForm").validate({
        rules: {
            myName: {
                required: true,
                maxlength: 40
            }  // <-- removed trailing comma
        },
        messages: {
            myName: {  // <-- need input name
                maxlength: "You crossed a maximum limit"
            }
        }
    });
});