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