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

文末福利资源更新  

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

https://github.com/nosir/cleave.js

特征

• 信用卡号码格式

• 电话号码格式（国际化）

• 日期格式

• 数字格式

• 自定义定界符，前缀和块模式

• CommonJS / AMD模块化

• ReactJS组件

• AngularJS指令（1.x）

• ES模块化

为什么使用Cleave.js?

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

效果

信用卡

日期

时间

千分位（货币）

手机号

自定义

使用

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

JavaScript

只需引入

<script src="cleave.min.js"></script>
<script src="cleave-phone.{country}.js"></script>

cleave-phone.{country}.js 插件仅在启用电话快捷方式时才需要。

然后有一个文本字段

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

在你的JavaScript中 new Cleave

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

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)} />
    );
  }
}

粉丝福利

猜你喜欢