什么是 Bredon？
Bredon 是一个通过编写样式来指定字符串格式的 JavaScript 库。它主要是通过一种类 CSS 的格式指定样式，并且可以进行某些格式验证，以确保特定的内容符合所需的格式。Bredon 非常有用，因为它可以节省大量验证输入格式的代码。此外，它还有许多功能，使开发者可以对输入模式设置各种限制，例如：正则表达式。
如何安装 Bredon？
Bredon 可以通过 NPM 安装，如果您已经有 NPM，则可以使用以下命令安装：
npm install bredon --save
如何使用 Bredon？
在安装 Bredon 后，在您的 JavaScript 代码中导入 Bredon 即可使用它。创建 Bredon 实例并传入样式字符串即可开始验证和格式化输入。下面是一个示例：
-- -------------------- ---- ------- ------ ------ ---- --------- ----- ------------- - --------------------------------------- -- ------------------------------- ----- ------ - --- ---------------------- ----- ------- - ------------------------------------------ --------------------------------- - -- - ----- ------- - --------------------------- ------------------- - ------- - ------- - ------ ---
在上面的代码中，我们首先定义了一个类型为密码的样式规则。通过调用 new Bredon() 方法并将样式字符串传递给它，我们创建了一个新的 Bredon 实例。接下来，我们获取一个指向密码输入域的引用，然后添加一个输入事件侦听器。在事件处理程序中，我们使用 bredon.test() 方法来测试输入值是否符合样式规则。如果是，则密码输入框文本的颜色将变为绿色，否则将变为红色。
样式语法
Bredon 样式遵循一些常见的 CSS 规则，并且有自己的规则和语法。它的主要元素是选择器、属性和值。选择器对应于您要验证和格式化的输入，而属性和值对应于针对选择器的要求。以下是 Bredon 样式的一般结构：
选择器 {
属性：值；
属性：值；
…
}下面是一些常见的属性和值：
| 属性 | 值 | 描述 |
|---|---|---|
| allowed | string或regexp类型 | 允许输入的字符串或模式，如果有多个字符串或模式，则用逗号分隔，例如：allowed: "a,b,c" 或 allowed: /\\d+/" |
| charset | string类型 | 允许输入的字符集（使用 char() 定义），例如：charset: "SBCS, Hiragana"。默认情况下，它使用 Latin 基本字符集。该属性不会强制 Bredon 在输入中只包含这些字符，而是将这些字符初始化为 "可见字符"。例如，如果您限制使用的字符集为 Hiragana，则仍然需要处理字母和数字。 |
| format | function类型 | 定义输入的输出格式和样式，例如：format: ({ input, isComplete }) => isComplete ? input : input + "_" |
高级功能
Bredon 还有许多其他更高级的功能，例如具有 Unicode 模块，支持在输入框内显示格式化文本，处理多个样式等。您可以在官方文档中找到更多详细的信息。
总结
Bredon 是一个非常有用的 JavaScript 库，可以用于验证和格式化输入。它的使用方法简单，并且有许多高级功能，使开发者可以自定义输入格式。在您的下一个前端项目中，尝试使用 Bredon 来使输入验证更加轻松！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671381e8991b448e3615