bootstrap-maxlength长度验证(v4)

插件使用bootstrap-maxlength 1.9.1。

github地址：http://mimo84.github.io/bootstrap-maxlength/

默认使用

默认当输入框获得焦点时，提示将显示：

<input type="text" class="form-control" maxlength="25" name="defaultconfig" id="defaultconfig">

$("input#defaultconfig").maxlength({
    warningClass: "badge badge-info",
    limitReachedClass: "badge badge-warning"
});

阈值

使用 threshold 选项表示还有多少字符可以开始显示指示。

<input type="text" maxlength="25" name="thresholdconfig" class="form-control" id="thresholdconfig">

$("input#thresholdconfig").maxlength({
    threshold: 20,
    alwaysShow: false,
    warningClass: "badge badge-info",
    limitReachedClass: "badge badge-warning"
});

位置

您所需要做的就是用其中一个字符串指定 placement 选项。如果未指定，则将被定位到“底部”。

<input type="text" class="form-control" maxlength="25" name="placement" id="placement">

$("input#placement").maxlength({
    // 可使用的值有: bottom, left, top, right, bottom-right, top-right, top-left, bottom-left 和 centered-right。
    // 你也可以使用 : bottom-right-inside, top-right-inside, top-left-inside and bottom-left-inside.
    alwaysShow: true,
    placement: "top-right-inside",
    warningClass: "badge badge-info",
    limitReachedClass: "badge badge-warning"
})

始终显示

如果 showOnReady 为 true，则在指示器就绪时始终显示。默认值：false。

<input type="text" class="form-control" maxlength="25" name="alloptions" id="alloptions">

$("input#alloptions").maxlength({
    showOnReady: true,
    warningClass: "badge badge-success",
    limitReachedClass: "badge badge-danger",
    separator: " 个字符； ",
    preText: "已输入 ",
    postText: " 个可用字符。",
    validate: !0
});

文本域

Bootstrap maxlength 支持文本区域和输入。即使在旧的IE上。

<textarea id="textarea" class="form-control" maxlength="225" rows="3" placeholder="此文本区域限制为225个字符。">

$("textarea#textarea").maxlength({
    threshold: 255,
    warningClass: "badge badge-info",
    limitReachedClass: "badge badge-warning"
});

涉及的文件：

• lyear_js_maxlength.html
• js/bootstrap-maxlength/bootstrap-maxlength.min.js