Cleave js 使用

1111111111111111 xxxxxx

Cleave.js

键入时格式化 < input />内容

 

信用卡号码格式

明确

•  

  美国运通：从34/37开始

  34             

•  

  签证：从4开始

  4               

•  

  大来俱乐部：从300-305 / 309开始......

  300           

•  

  万事达卡：从51-55 / 22-27开始

  51              

•  

  JCB：从35/2131/1800开始

  35              

•  

  发现：从6011 | 65 | 644-649开始

  6011            

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

电话号码格式

AC 广告 AE AF AG AI AL 上午 AO AR 如 在 AU AW 斧头 AZ BA BB BD 是 BF BG BH 双 BJ BL BM BN BO BQ BR BS BT BW 经过 BZ CA CC 光盘 CF CG CH CI CK CL 厘米 CN CO CR CU 简历 CW CX CY CZ DE DJ DK DM 作 DZ EC EE 例如 EH ER ES ET FI 缩略词 FK 调频 FO FR GA GB GD 通用电器 GF GG GH GI GL GM GN GP GQ GR GT GU GW GY HK HN HR H T 胡 ID IE IL IM 在 IO 智商 IR IS 它 JE JM JO J.P KE 公斤 KH KI KM KN KP KR KW KY KZ LA 磅 LC 李 LK LR LS LT 鲁 LV LY 嘛 MC MD 我 MF MG MH MK ML MM MN MO MP MQ 先生 女士 公吨 亩 MV MW MX MY MZ NA NC NE NF NG 你 NL 没有 NP NR NU NZ OM PA PE PF PG PH PK PL 下午 PR PS PT PW PY QA 回覆 RO RS RU RW SA SB SC SD SE SG SH SI SJ SK SL SM SN 因此 SR SS ST SV SX SY SZ TA TC TD TG TH TJ TK TL TM值 TN 至 TR TT 电视 TW TZ UA UG 咱们 UY UZ VA 虚电路 VE VG VI VN VU WF WS YE YT ZA ZM ZW

选择国家

 

 

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

日期格式

var cleave = new Cleave('.input-element', { date: true, 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' });

自定义选项

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

ReactJS组件

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

在操场上试一试

 

操场

JSFiddle（Basic）  JSFiddle（更多状况）  React JSFiddle  Angular JSFiddle