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 JSFiddleAngular JSFiddle