js实现input输入框内容自动格式化工具-Cleave.js使用教程

Cleave.js是一个帮助表单实现各种复杂实时格式化显示的工具库，可以说Cleave.js让表单的输入变得更加的高逼格，能实现很多复杂的表单格式化显示，简而言之就是针对 <input> 标签按照诸如千分位、电话号码等风格的特定显示！通过使用这个库，您不需要编写任何正则表达式来控制输入文本的格式。然而，这并不意味着取代任何验证或掩码库，你仍应在后端验证数据或者在前端对输入的内容进行校验。

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

效果：

信用卡

var cleave = new Cleave('.input-element', {
    creditCard: true,
    onCreditCardTypeChanged: function (type) {
        // update UI ...
    }
});

日期

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

var cleave = new Cleave('.input-element', {
    date: true,
    datePattern: ['m', 'y']
});

时间

var cleave = new Cleave('.input-element', {
    time: true,
    timePattern: ['h', 'm', 's']
});

var cleave = new Cleave('.input-element', {
    time: true,
    timePattern: ['h', 'm']
});

货币（千分位，万）

var cleave = new Cleave('.input-element', {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand'//可改为'wan'
});

自定义

var cleave = new Cleave('.input-element', {
    blocks: [4, 3, 3, 4],
    uppercase: true
});

var cleave = new Cleave('.input-element', {
    delimiter: '·',
    blocks: [3, 3, 3],
    uppercase: true
});

var cleave = new Cleave('.input-element', {
    delimiters: ['.', '.', '-'],
    blocks: [3, 3, 3, 2],
    uppercase: true
});

var cleave = new Cleave('.input-element', {
    prefix: 'PREFIX',
    delimiter: '-',
    blocks: [6, 4, 4, 4],
    uppercase: true
});

使用

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

JavaScript

创建input输入框

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

引入下载好的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>

在JavaScript中引入需要的实例

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

CommonJs

var Cleave = require('cleave.js');
require('cleave.js/dist/addons/cleave-phone.{country}');
 
var cleave = new Cleave(...)

AMD

require(['cleave.js/dist/cleave.min', 'cleave.js/dist/addons/cleave-phone.{country}'], function (Cleave) {
    var cleave = new Cleave(...)
});

ES module

// Rollup, WebPack
import Cleave from 'cleave.js';
var cleave = new Cleave(...)

// Browser
import Cleave from 'node_modules/cleave.js/dist/cleave-esm.min.js';
var cleave = new Cleave(...)

TypeScript

可通过npm install——save-dev @types/cleave.js获得。安装完成后，你可以像下面这样导入Cleave:

import Cleave = require('cleave.js');

react组件的类型也可用，并且可以以相同的方式导入

import Cleave = require('cleave.js/react');

ReactJS

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/>字段

VueJs

全局配置：

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}">           

写在最后

更多相关内容可以去到https://nosir.github.io/cleave.js/