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开发者文档

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

Java

leetcode

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

喝着茶写代码！最易用的自托管一站式代码托管平台，包含Git托管，代码审查，团队协作，软件包和CI/CD。

RuoYi-Vue3

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

无需学习 Kubernetes 的容器平台，在 Kubernetes 上构建、部署、组装和管理应用，无需 K8s 专业知识，全流程图形化管理

基于golang开发的网关。具有各种插件，可以自行扩展，即插即用。此外，它可以快速帮助企业管理API服务，提高API服务的稳定性和安全性。