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

粉丝福利

143期留言+在看幸运用户：暂无。

临走前留下，今天的福利

• 福利1：《教你玩转手机摄影，随手拍出好照片》获取资源请在公众号对话框中回复关键字：FL04，如果没有关注请扫下面的二维码
• 福利2：在看+留言，我随机抽取一位认真留言的小伙伴，给他发一个红包奖励

猜你喜欢

• 资源推荐|感谢有这3个资源网站，坚持使用了半年，如今我月薪30000
  
• 开源推荐|Antmove：小程序转换器，快速实现小程序跨平台
  
• 开源推荐|10个惊人的复古CSS套件
• 开源推荐|使用Vime.js添加视频
  
• 开源推荐|使用 GPU.js 改善JavaScript性能
• 开源推荐|哇噻！使用使用JSON文件创建SPA页面
  
  

- END -

点赞 + 在看 + 留言，下一个幸运儿就是你！
走心的分享更容易被抽中~
开奖时间 下期文末