Cleave.js 教程：快速入门与配置详解

2026-01-17 09:09:19作者：曹令琨Iris

1. 项目目录结构及介绍

Cleave.js 的源码目录结构如下：

.
├── build                  # 构建产出文件
│   ├── cleave.min.js      # 压缩后的主库文件
│   └── ...
├── dist                   # 分发的可直接使用的文件
│   ├── addons             # 插件目录
│   │   ├── cleave-phone    # 电话号码格式化插件
│   │   └── ...
│   ├── cleave-esm.min.js   # ESM 模块压缩版
│   └── cleave.min.js       # 主库压缩版
├── docs                   # 文档目录
├── example                 # 示例代码
├── src                     # 源代码目录
└── package.json            # 项目配置文件

build 和 dist 目录包含编译后的文件，可以直接在浏览器中使用。
src 包含 Cleave.js 的原始 JavaScript 代码。
docs 是项目的文档目录，包括 API 参考和示例。
example 提供了一些简单的例子，帮助理解如何使用 Cleave.js。

2. 项目启动文件介绍

Cleave.js 不包含一个传统的“启动文件”，因为它是一个库，而不是一个应用程序。但它提供了一个简单的 HTML 示例页面来演示其功能。例如，在 example/index.html 中可以看到如何在网页中引入库并创建实例进行使用。你可以通过浏览器打开这个文件来查看 Cleave.js 的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cleave.js Example</title>
    <!-- 引入 Cleave.js 库 -->
    <script src="path/to/cleave.min.js"></script>
</head>
<body>
    <input type="text" id="input-element" />
    <script>
        // 创建 Cleave 实例
        var cleave = new Cleave('#input-element', {
            creditCard: true
        });
    </script>
</body>
</html>

3. 项目的配置文件介绍

Cleave.js 的主要配置是通过构造函数传递的对象参数完成的。这里是一些常见的选项：

new Cleave(element, {
    // 选项
    creditCard: boolean, // 是否启用信用卡号格式化
    phone: boolean,      // 是否启用电话号码格式化（需配合电话号码插件）
    phoneRegionCode: string, // 电话号码的国家代码
    date: boolean,       // 是否启用日期格式化
    datePattern: Array,  // 自定义日期模式（如 ['Y', 'm', 'd'] 表示 'YYYY-MM-DD']
    delimiter: string,   // 自定义分隔符
    numericOnly: boolean, // 是否只允许数字输入
});

例如，如果你想要创建一个用于格式化美国电话号码的输入字段，可以这样配置：

var cleave = new Cleave('.input-phone', {
    phone: true,
    phoneRegionCode: 'US',
});

更多的配置项和使用方式可以在官方文档中找到。

希望这个简要的指南对你理解和使用 Cleave.js有所帮助。记得在实际项目中根据需求选择适当的配置，并确保安全地验证和处理用户输入的数据。

cleave.js

Format input text content when you are typing...

项目地址：https://gitcode.com/gh_mirrors/cl/cleave.js

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

Ascend Extension for PyTorch

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

AscendNPU-IR是基于MLIR（Multi-Level Intermediate Representation）构建的，面向昇腾亲和算子编译时使用的中间表示，提供昇腾完备表达能力，通过编译优化提升昇腾AI处理器计算效率，支持通过生态框架使能昇腾AI处理器与深度调优

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

Cleave.js 教程：快速入门与配置详解

1. 项目目录结构及介绍

2. 项目启动文件介绍

3. 项目的配置文件介绍

热门内容推荐

最新内容推荐

项目优选

Cleave.js 教程：快速入门与配置详解

1. 项目目录结构及介绍

2. 项目启动文件介绍

3. 项目的配置文件介绍

相关内容推荐

热门内容推荐

最新内容推荐

项目优选