龙空技术网

Web表单开发之实时格式化显示——Cleave.js

爱分享Coder 6715

前言:

此刻你们对“js格式化代码快捷键”都比较关心,我们都想要了解一些“js格式化代码快捷键”的相关内容。那么小编也在网络上搜集了一些有关“js格式化代码快捷键””的相关资讯,希望同学们能喜欢,我们一起来学习一下吧!

介绍

Cleave.js是一个帮助表单实现各种复杂实时格式化显示的工具库,可以说Cleave.js让表单的输入变得更加的高逼格,能实现很多复杂的表单格式化显示,简而言之就是针对<input/>标签按照诸如千分位、电话号码等风格的特定显示!

Github

特征信用卡号码格式电话号码格式(国际化)日期格式数字格式自定义定界符,前缀和块模式CommonJS / AMD模块化ReactJS组件AngularJS指令(1.x)ES模块化为什么使用Cleave.js?

Cleave.js是通过格式化键入的数据来提供一种提高输入字段可读性的简便方法。通过使用该库,无需编写任何令人难以置信的正则表达式或掩码模式即可格式化输入文本。但是,这并不意味着要替换任何验证或掩码库,仍然需要对数据进行服务器端的校验。也就是说Cleave.js是为了更加好的可读性

实践信用卡

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'});
自定义React组件
import React from 'react';import ReactDOM from 'react-dom';import Cleave from 'cleave.js/react';class MyComponent extends React.Component {    onChange(event) {        // formatted pretty value        console.log(event.target.value);        // raw value        console.log(event.target.rawValue);    }    render() {        return (            <Cleave placeholder="Enter your credit card number"                options={{creditCard: true}}                onChange={this.onChange.bind(this)} />        );    }}
总结

Cleave.js是一个非常值得使用的表单工具库,其实时的格式化显示会让表单特征更加丰富,enjoy it!

标签: #js格式化代码快捷键