Ilan 掩码 - Javascript

Ilan 掩码是一个JavaScript库，用于实现表单数据的掩码处理。掩码是一种在输入时限制输入格式的技术，常用于电话号码、日期、邮政编码等输入框中。

功能特性

Ilan 掩码包含以下主要功能特性：

• 支持数字、字母、符号等类型的掩码
• 支持对输入框内已有的内容进行掩码处理
• 支持自定义掩码规则和错误提示

安装和使用

通过npm安装Ilan掩码：

npm install ilan-mask --save

使用：

import { IlanMask } from 'ilan-mask';

const input = document.getElementById('input');
const mask = new IlanMask(input, {
  mask: '999-AAA-****',
  prompt: '请输入正确的格式',
  types: {
    '9': /\d/,
    'A': /[a-zA-Z]/,
    '*': /[\w]/  
  }
});

input.addEventListener('input', function () {
  mask.mask();
});

API文档

IlanMask

new IlanMask(element, options)

创建一个IlamMask实例。

参数

• element：表单元素，如<input>或<textarea>
• options：可选，包含以下属性：
  • mask：掩码规则，如999-***-***。如果省略，使用表单元素的data-mask属性。
  • prompt：错误提示信息。如果省略，使用表单元素的data-mask-prompt属性。
  • types：掩码类型，如{ '9': /[0-9]/, 'A': /[a-zA-Z]/ }。如果省略，使用默认掩码类型。

mask()

mask()

对表单元素的内容进行掩码处理。在<input>或<textarea>的input事件中调用该方法即可自动进行掩码处理。

示例

以下是一个基本的掩码示例，要求输入电话号码：

<form>
  <label>电话号码：</label>
  <input type="text" id="phone" data-mask="999-9999-9999" data-mask-prompt="请输入正确的电话号码">
</form>

<script>
import { IlanMask } from 'ilan-mask';

const phone = document.querySelector('#phone');
const mask = new IlanMask(phone);

phone.addEventListener('input', function () {
  mask.mask();
});
</script>

以上代码将对用户输入进行掩码处理，限制只能输入数字和分隔符。如果用户输入不符合规则，将弹出提示信息。

请注意

• Ilan掩码只是一种输入格式的限制手段，不能代替后端的输入验证。
• 每个表单元素只能创建一个IlanMask实例。