牛逼！表单自动格式化

程序员老鱼

发布于 2023-10-25 10:58:39

1500

发布于 2023-10-25 10:58:39

文章被收录于专栏：前端实验室前端实验室

大家好，我是「前端实验室」爱分享的了不起~

今天，了不起发现了一个非常有用的宝藏插件：Cleave.js。提供一个简单的方法来格式化您的输入数据,以此增加输入字段的可读性。让你的页面表单使用体验感爆棚~

话不多说，直接来看！！

先睹为快

我们以表单中常需要格式化显示的例子作为展示。

日期

年-月-日的格式化。我们只需要正常输入数据“20201209”，表单自动格式化位“2020-12-09”

两位简写的日期格式月/年也是一样！

时间

对于时间个格式化，用于显示的情况比较多！

数值千分位格式化

通过千分位划分，数量级是不是非常清晰了呢？

Cleave.js简介

按照官网的介绍，就简单到一句话。

大道至简，真不是说说就行的~

Format your <input/> text content when you are typing. 格式化你的输入内容

根据上一部分的内容，我们可以知道 Cleave.js 就是帮助我们在输入的时候，边输入，边格式化。

通过使用这个库，您不需要编写任何正则表达式来控制输入文本的格式。如果输入错误的内容，这些错误的内容是不会显示的，连校验和验证都省略了。然而，这并不意味着取代任何验证或掩码库，你仍应在后端验证数据。毕竟它只管表单上的显示内容😓~

Cleave.js 支持信用卡号码、电话号码格式（支持各个国家）、日期格式、数字格式、自定义分隔符，前缀和块模式等。

使用

Cleave.js 支持在普通JS和React、Angular中使用，也支持CommonJS、AMD、ES Module、TypeScript。也有如何支持Vue.js的方法文档。

JavaScript原始用法

1.创建input输入框

<input class="input-phone" type="text" />

2.引入下载好的cleave.js文件

<script src="./js/cleave.js"></script>

或者引入CDN链接文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js"></script>

3.在JavaScript中引入需要的实例

var cleave = new Cleave('.input-phone', {
    date: true,
    delimiter: '-',
    datePattern: ['Y', 'm', 'd']

就按照简单的引入后，初始化使用即可！

React中的使用

直接NPM安装

npm install --save cleave.js

然后在组件中引入使用即可。

import React from 'react';
import ReactDOM from 'react-dom';
import Cleave from 'cleave.js/react';
 
class MyComponent extends React.Component {
 
    constructor(props, context) {
        super(props, context);
        this.onCreditCardChange = this.onCreditCardChange.bind(this);
        this.onCreditCardFocus = this.onCreditCardFocus.bind(this);
    }
 
    onCreditCardChange(event) {
        // 格式化后的数据
        console.log(event.target.value);
 
        // 原始数据
        console.log(event.target.rawValue);
    }
 
    onCreditCardFocus(event) {
        // update some state
    }
 
    render() {
        return (
            <Cleave placeholder="Enter your credit card number"
                options={{creditCard: true}}
                onFocus={this.onCreditCardFocus}
                onChange={this.onCreditCardChange} />
        );
    }
}

您只需把<Cleave/>作为普通的<input/>字段标签使用就好啦~

Vue中的使用

起初， Cleave.js 是不准备原始仓库中添加对Vue的支持的，但耐不住大家苦苦要求，最终给出了下面这样的使用方式。它是通过指令的方式来支持的。

你可以全局配置，到处使用。

import Vue from 'vue'
import Cleave from 'cleave.js';
 
Vue.directive('cleave', {
    inserted: (el, binding) => {
        el.cleave = new Cleave(el, binding.value || {})
    },
    update: (el) => {
        const event = new Event('input', {bubbles: true});
        setTimeout(function () {
            el.value = el.cleave.properties.result
            el.dispatchEvent(event)
        }, 100);
    }
})

也可以配置为本地指令。

import Cleave from 'cleave.js';
export default {
 
    ...
    directives: {
        cleave: {
            inserted: (el, binding) => {
                el.cleave = new Cleave(el, binding.value || {})
            },
            update: (el) => {
                const event = new Event('input', {bubbles: true});
                setTimeout(function () {
                    el.value = el.cleave.properties.result
                    el.dispatchEvent(event)
                }, 100);
            }
        }
    }
    ...
}

在Html中，像如下一样使用就好。

<input v-model="ccNumber" class="input-element" v-cleave="{creditCard: true, onCreditCardTypeChanged : cardChanged}">                      
<input name="text"  v-model="ccMonth" v-cleave="{date: true,datePattern: ['m']}">
<input type="number" v-model="ccv" v-cleave="{numeral: true,numeralPositiveOnly: true,numeralIntegerScale: 3}">