在前端开发中，开发者经常需要对用户输入的数据进行格式化和校验，例如对手机号、身份证号等进行格式化和校验。在这种情况下，我们可以借助一些工具来简化这个过程，并且文本输入框的数据格式化和校验是一个经常重用的模块，因此我们可以将其封装成 npm 包，提高开发效率。
本教程就是要介绍的一个这样的 npm 包 —— ss-inputmask 。
简介
ss-inputmask 是一个基于 jQuery 和 inputmask.js 的文本输入框数据格式化和校验插件，使用简单，效果和稳定。它支持常见输入数据格式的校验，如日期、时间、电话号码、电子邮件、货币、网址、IP 地址等等。本包还支持自定义校验规则，满足一些特殊场景的需求。
安装
npm install ss-inputmask
使用
使用 ss-inputmask 的方法很简单，我们只需在需要使用该插件的页面引入它即可。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-----------------
------- -----------------------------------------------------------
------- ------------------------------------------------------------------------------------------------------------
------- ---------------------------------------------------------
-------
------
--------------------
------ ----------- ------------- --
--- --
------------------
------ ----------- ------------ --
--- --
---------------------
------ ----------- ------------------- --
--------
------------ -
-------------------------------------- - ------------------ ---- --
----------------------------------
-------------------------------
----- ---------
------ -
---- -
---------- -------- -------
------------ - --------
-
-
---
---
---------
-------
-------上述代码演示了一个页面中使用 ss-inputmask 插件的方法，我们可以看到通过 ssInputmask() 方法我们可以轻松地定义自己的校验规则，从而满足项目的需求。
在使用 ss-inputmask 插件时，我们也可以通过配置选项来自定义其行为，下面是配置选项的所有参数和默认值：
-- -------------------- ---- ------- ---------------------------- ----- --- ------ --- ---------------------- --- ------------ --- ---------------- ------ --------------------- ----- ----------- ------ --------------- ------ ------- --- -------- ------- ------------- ------- -------------- ------- --------- ------ ---
mask
- 类型: String
- 默认值: ""
该属性用于定义输入掩码，我们可以通过使用字符 9、a、* 等来定义数据格式化模版。例如："999-99-9999" 表示一个带有分隔符的电话号码，"99/99/9999" 表示日期形式的数据。
rules
- 类型: Object
- 默认值: {}
该属性用于增加自定义的验证规则。例如，如果想要在电话号码输入框里只能输入数字和连字符，我们可以添加如下规则：
-- -------------------- ---- -------
-------------------------
----- ----------------
------ -
---- -
---------- ----------
------------ -
-
-
---customMaskDefinitions
- 类型: Object
- 默认值: {}
该属性用于增加自定义的掩码定义规则，可以提供更多格式化数据的自定义选择，如在日期格式中增加了 "<": { validator: "dateLtToday" } 校验规则，限制输入日期必须小于系统时间，具体定义方式如下：
-- -------------------- ---- -------
------------------------
----- -------------
---------------------- -
---- -
---------- -------------- -------- ---- ------- ----- -
------ -----------------------
--
------------ --
------------- -- ---------- -------------- -------- ---- ------- ----- - ------ ----------------------- -- ------------ - --
--
---- -
---------- -------------
-
-
---placeholder
- 类型: String
- 默认值: ""
该属性用于设置文本框未输入数据时所显示的占位符文本。
clearIncomplete
- 类型: Boolean
- 默认值: false
该属性用于使得输入框上的掩码与输入的数据匹配程度不完全时是否将剩余的掩码删除。
clearMaskOnLostFocus
- 类型: Boolean
- 默认值: true
该属性用于设置是否在输入框失去焦点时清除未输入的掩码。
rightAlign
- 类型: Boolean
- 默认值: false
该属性用于设置输入框中完成的数据是否右对齐。
enableUndoRedo
- 类型: Boolean
- 默认值: false
该属性用于是否启动输入框的撤销和重做功能。
ignore
- 类型: Array
- 默认值: []
该属性是一个需要忽略的字符或序列的数组，当设置禁止输入一些字符或字符串时，可以添加进去。
callbacks
- 类型: Object
- 默认值: {}
该属性用于设置 ss-inputmask 插件所支持的回调函数。
- onBeforeMask
- onBeforeWrite
- onUnMask
具体需要实现的内容可参考官方文档。
小结
本篇文章介绍了一个前端开发中常见的 npm 包 ss-inputmask，以及它在数据输入格式化和校验方面的应用，包含了详细的使用教程，以及一些自定义的校验规则和配置选项的使用方法，相信读者可以通过该教程掌握使用该插件的技能。在实际开发中，我们可以利用 ss-inputmask 插件来优化前端开发的数据格式化和校验工作，提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572d481e8991b448e908f