maskedinput是一个简单但可完全配置的jQuery输入掩码插件，允许用户以特定格式在固定位置键入字符。非常适合日期/IP地址/货币输入字段。

更多功能：

• 实时数据验证。
• 允许在一个字段中使用多个掩码。
• 通过ARIA属性完全可访问。
• 自定义正则表达式模式。
• 有很多选项和API。

如何使用它:

1.在页面上包含必要的JavaScript库。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.maskedinput.umd.min.js"></script>

2.创建一个新的MaskedInput对象，并按如下方式设置数据格式：

var dateMask = new MaskedInput({
    format: 'dd/MM/yyyy hh:mm tt',
    // additional patterns to recognize the format
    patterns: {}
});

3.将日期掩码附加到给定的输入。

dateMask.$el.appendTo('#date-field-cell');

4.设置每个字段的选项：

dateMask
  .fieldOption('hours_12', 'required', false)
  .fieldOption('minutes', 'required', false)
  .fieldOption('ampm', 'required', false)
  .resize();

5.API方法。

dateMask
 
// Get an internal field element by index or by name.
.field(index)
 
// Get/set a field's configuration option
.fieldOption(name, newValue)
 
// Get/set an internal field's value by index or by name.
.fieldValue(index, newValue)
 
// Get/set a configuration option
.option(name, newValue)
 
// Call if something has drastically changed and the control needs to be regenerated. 
// Only applicable when you've manually changed a field's type.
.render()
 
// Update the size of the field's content. 
// This can't be called when the control is not on the DOM yet. If you don't want the field to be dynamically sized, you can skip calling this.
.resize()
 
// A synonym for value
.val(newValue?)
 
// Get/set the full value
.value(newValue?)

7.零件类型参数：

/**
* @typedef {String} MaskedInput~PartType
* @name MaskedInput~PartType
* @enum {String}
*/
var PartType = {
  /** @const */ NUMBER: 'number',
  /** @const */ TEXT: 'text',
  /** @const */ LABEL: 'label'
};

8.屏蔽输入部件参数：

• 类型：字段类型
• 名称：此字段的名称
• ariaLabel（aria标签）：ARIA可访问性标签
• 文本：此字段的文本（如果是LABEL）
• 占位符：字段占位符
• 长：字段长度
• 最大长度：字段的最大长度
• 数字最小值：最小数值
• 数字最大值：最大数值
• 整体编号：强制数字为整数？（默认值`false`）
• 验证器：验证器正则表达式或函数
• 选项：文本字段可供选择的选项
• 后处理：用于在用户检索之前对值进行后处理的函数
• 衬料：在值结果中启用填充（默认值为“true”）
• 必修的：字段是必填字段吗（默认为“true”）
• 默认值：默认值，如果字段不是`required则使用`
• 强制占位符宽度：始终考虑占位符的宽度（默认值为“true”）

9.屏蔽输入模式参数：

• 图案：要在格式中识别的模式
• 类型：字段类型
• 名称：此字段的名称
• ariaLabel（aria标签）：ARIA可访问性标签
• 文本：此字段的文本（如果是LABEL）
• 占位符：字段占位符
• 长：字段长度
• 最大长度：字段的最大长度
• 数字最小值：最小数值
• 数字最大值：最大数值
• 整体编号：强制数字为整数？（默认值`false`）
• 验证器：验证器正则表达式或函数
• 选项：文本字段可供选择的选项
• 后处理：用于在用户检索之前对值进行后处理的函数
• 衬料：在值结果中启用填充（默认值为“true”）
• 必修的：字段是必填字段吗（默认为“true”）
• 默认值：默认值，如果字段不是`required则使用`
• 强制占位符宽度：始终考虑占位符的宽度（默认值为“true”）

10.屏蔽输入选项：

• 总体安排：要显示的格式
• 模式：格式中要识别的其他模式

更新日志：

2022-12-09

• v1.0.15：[功能]fieldCount/fieldKeys getters

2022-01-11

• v1.0.14：〔修复〕传递现有根元素时出现未定义错误

2022-01-10

• v1.0.13：[功能]允许连接到现有的根元素

2021-04-26

• v1.12:修复错误

2021-04-21

• v1.0.11：添加了defaultPartOptions

2021-01-03

• 版本0.10

2018-12-07

• v1.0.8：添加了启用/禁用方法

2017-05-09

• v1.0.7:js更新

2017-05-04

• v1.0.5:允许使用.val（“”）清除字段

2017-01-15

• v1.04版本

预览截图

jQuery 简单输入掩码和验证插件 maskedinput