Bootstrap 3默认验证插件

Question

大家好，请检查一下这段代码

验证部分有效，但仅在必填字段上，范围长度似乎不起作用。你能帮帮我吗？谢谢!

    $(document).ready(function () {
    var Username = $("#Username");
    var Password = $("#Password");
    var LoginForm = $('#LoginForm');
    var SubmitBtn = $('#SubmitBtn');

    LoginForm.validate();

    Username.rules("add", {
        required: true,
        rangelength: [3, 20],
        messages: {
            required: "You must provide your username.",
            rangelength: "The user name must be between 3 and 20 characters in length."
        }
    });
    Password.rules("add", {
        required: true,
        messages: {
            required: "You must provide your password."
        }
    });

    $('#LoginForm').submit(function () {
        if ($(this).valid()) {
            $('#SubmitBtn').prop('disabled', true);
            return true;
        }
        return false;
    });

});

http://jsfiddle.net/hTPY7/476/

Answer 1

您忘记添加对jQuery Validate的引用。Bootstrap没有验证插件。

如果您愿意，您可以从Microsoft的CDN引用Jquery Validate。

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js

你的规则是OK的：

Username.rules("add", {
      required: true,
      rangelength: [3, 20],
      messages: {
        required: "You must provide your username.",
        rangelength: "The user name must be between 3 and 20 characters in length."
      }
    });

下面是它的工作原理：

http://jsfiddle.net/leniel/3F5Sf/1/