EasyUI jQuery maskedBox 小部件

EasyUI jQuery maskedBox 小部件是一款简单易用的 jQuery 插件，用于限制输入框中输入的内容格式。它可以轻松地对手机号码、邮政编码、日期等进行格式限制，让用户的输入符合规范，提高数据的准确性。

特性

• 支持多种常见的格式限制，比如手机号码、邮政编码、日期等。
• 支持自定义正则表达式对输入格式进行限制。
• 支持对输入框中的内容进行实时验证，如果格式不正确，会提示用户进行修改。
• 支持在输入框中显示默认提示信息，用户在未输入任何内容时可以提示用户输入格式要求。
• 支持设置输入框的默认值，方便用户输入。
• 支持更改输入框的样式和提示信息样式。

快速开始

1. 在 HTML 文件中引入 jQuery 和 EasyUI：

   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery-easyui/dist/jquery.easyui.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-easyui/dist/themes/default/easyui.css">
   

2. 在 HTML 文件中添加一个输入框，并为它添加一个 ID，比如 phone-number。

   <input id="phone-number" name="phone-number" type="text" class="easyui-maskedbox" data-options="mask: '999-9999-9999', prompt: '请输入手机号码'" />
   

3. 在 JavaScript 文件中初始化 maskedBox 小部件：

   $(function() {
       $('#phone-number').maskedbox();
   });
   

4. 刷新 HTML 页面，你应该可以看到一个格式为 ___-____-____ 的输入框，并带有一个提示信息 请输入手机号码。你可以在输入框中输入手机号码，并根据设置的格式限制进行输入。

API 文档

属性

| 属性名 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | mask | 字符串 | '' | 显示在输入框中的格式，比如 99-9999-9999。 | | prompt | 字符串 | '' | 在输入框中未输入任何内容时显示的提示信息。 | | defaultValue | 字符串 | '' | 输入框的默认值。 | | validType | 字符串 | '' | 输入框内容的验证规则，可选值包括 phone, zip, date, url, email，也可以是一个自定义的正则表达式。 | | tipPosition | 字符串 | 'top' | 提示框位置，可选值为 top, bottom, left, right。 | | tipAnimation | 布尔值 | true | 是否显示提示框的动画效果。 | | tipDuration | 数字 | 1000 | 提示框的显示时长，单位为毫秒。

方法

| 方法名 | 描述 | | --- | --- | | enable | 启用输入框，使其可以编辑和提交。 | | disable | 禁用输入框，使其不可以编辑和提交。 | | getMask | 获取输入框当前的格式。 | | setMask | 设置输入框的格式。 | | getPrompt | 获取输入框的提示信息。 | | setPrompt | 设置输入框的提示信息。 | | getDefaultValue | 获取输入框的默认值。 | | setDefaultValue | 设置输入框的默认值。 | | getValidType | 获取输入框的验证规则。 | | setValidType | 设置输入框的验证规则。 | | getTipPosition | 获取提示框的位置。 | | setTipPosition | 设置提示框的位置。 | | getTipAnimation | 获取是否显示提示框的动画效果。 | | setTipAnimation | 设置是否显示提示框的动画效果。 | | getTipDuration | 获取提示框的显示时长。 | | setTipDuration | 设置提示框的显示时长。 |

事件

| 事件名 | 描述 | | --- | --- | | onValidateSuccess | 输入框内容验证通过时触发。 | | onValidateFailed | 输入框内容验证失败时触发。 | | onTipShow | 提示框显示时触发。 | | onTipHide | 提示框隐藏时触发。 |

示例

验证手机号码格式

<input id="phone-number" name="phone-number" type="text" class="easyui-maskedbox" data-options="mask: '999-9999-9999', validType: 'phone', prompt: '请输入手机号码'" />

验证邮政编码格式

<input id="zip-code" name="zip-code" type="text" class="easyui-maskedbox" data-options="mask: '99999', validType: 'zip', prompt: '请输入邮政编码'" />

验证日期格式

<input id="date" name="date" type="text" class="easyui-maskedbox" data-options="mask: '9999-99-99', validType: 'date', prompt: '请输入日期'" />

使用自定义正则表达式验证格式

<input id="custom-format" name="custom-format" type="text" class="easyui-maskedbox" data-options="mask: '******', validType: /^[A-Za-z0-9]{6}$/, prompt: '请输入6位字母或数字'" />

结语

EasyUI jQuery maskedBox 小部件是一款非常实用的 jQuery 插件，用于限制输入框中输入的内容格式。难度较低，可在网页开发中迅速上手使用，提高数据的准确性，并且用户体验也比较好。